From eecc858b7df1ea286d68278c70241df9815eb8a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Semr=C3=A1d?=
 <76877124+VitroidFPV@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:58:42 +0200
Subject: [PATCH] Style: UI Refresh (#3956)

* Style: Use new color system

* Fix: sonarcloud issues, remove testing parts

* Fix: Remove double variables

* Style: First POC of UI refresh - Setup tab

* Style Fix: Prevent tab-specific breakpoints from escaping

* Style: Remove calc() for main layout

* Fix: Break into mobile UI along CSS, update mobile tabs

* Style: Refresh Ports tab

* Style: Refresh Configuration tab

* Style: Reposition StatusBar, add a bit of spacing

* Style: Remove text shadows

* Style: Fix overlapping select styles

* Fix: Remove import for deleted files, fixes builds

* Style: Refresh Power & Battery tab

* Style: Prevent OSD tab styles from escaping

* Style: Refresh Failsafe tab

* Style: Refresh Modes tab

* Style: Add back td height

* Style: Refresh Adjustments tab

* Style: Refresh Motors tab

* Style: Catch up main.less to various changes

* Style: Refresh VTX tab

* Style: Refresh OSD tab

* Style: Refresh Receiver tab

* Chore: Clean up SonarCloud issues

* Chore: Clean up more SonarCloud issues

* Style: Refresh Blackbox tab

* Style: Refresh headerbar

* Style: Refresh Options tab

* Style: Refresh Firmware Flasher tab

* Style: Adjust detect feature, add breakpoint

* Fix: Use updated i18n in button

* Style: Refresh MSP Radio Emulator

* Style: Fix Radio Emulator breakpoint

* Style: Fix Radio Emulator layout

* Style: Refresh headerbar

* Style: Refresh Sensors tab

* Style: More consistent select elements

* Style: Refresh GPS tab

* Style: Fix motors tab layout

* Style: Various fixes, align more toolbars

* Style: Refresh CLI tab

* Style: Clean up VTX tab styling

* Style: Fix sensor status color
---
 locales/en/messages.json                      |    8 +-
 .../betaflight-logo/BetaflightLogo.vue        |   21 +-
 src/components/data-flash/DataFlash.vue       |    4 +-
 .../port-picker/FirmwareVirtualOption.vue     |  193 +-
 .../port-picker/PortOverrideOption.vue        |   61 +-
 src/components/port-picker/PortPicker.vue     |    4 +
 src/components/port-picker/PortsInput.vue     |   86 -
 src/components/quad-status/BatteryIcon.vue    |    6 +-
 .../quad-status/BottomStatusIcons.vue         |    4 +-
 src/components/sensor-status/SensorStatus.vue |   15 +-
 src/components/status-bar/PortUtilization.vue |    2 +-
 src/components/status-bar/ReadingStat.vue     |    6 +-
 src/components/status-bar/StatusBar.vue       |   16 +-
 src/css/dark-theme.less                       |  866 +--------
 src/css/dropdown-lists/LICENSE                |   20 -
 src/css/dropdown-lists/css/style_lists.css    |  148 --
 src/css/main.less                             | 1632 ++++++++---------
 src/css/receiver_msp/receiver_msp.less        |   81 +-
 src/css/select2_custom.less                   |   75 +-
 src/css/tabs/adjustments.less                 |   55 +-
 src/css/tabs/auxiliary.less                   |  271 ++-
 src/css/tabs/cli.less                         |   11 +-
 src/css/tabs/configuration.less               |  430 +----
 src/css/tabs/failsafe.less                    |  215 +--
 src/css/tabs/firmware_flasher.less            |  262 ++-
 src/css/tabs/gps.less                         |   58 +-
 src/css/tabs/help.less                        |    4 +-
 src/css/tabs/landing.less                     |   10 +-
 src/css/tabs/led_strip.less                   |   42 +-
 src/css/tabs/logging.less                     |    2 +-
 src/css/tabs/motors.less                      |  406 +---
 src/css/tabs/onboard_logging.less             |  137 +-
 src/css/tabs/options.less                     |    6 +-
 src/css/tabs/osd.less                         |  452 ++---
 src/css/tabs/pid_tuning.less                  |  110 +-
 src/css/tabs/ports.less                       |  143 +-
 src/css/tabs/power.less                       |   60 +-
 src/css/tabs/receiver.less                    |  501 +----
 src/css/tabs/sensors.less                     |  129 +-
 src/css/tabs/servos.less                      |   34 +-
 src/css/tabs/setup.less                       |  218 +--
 src/css/tabs/static_tab.less                  |    2 +-
 src/css/tabs/transponder.less                 |   18 +-
 src/css/tabs/vtx.less                         |  231 +--
 src/css/theme.css                             |  103 +-
 src/images/corner.svg                         |    9 +
 src/images/dark-wide-2-compact.svg            |  133 ++
 src/images/dark-wide-2.svg                    |   47 +
 src/images/icons/sensor_baro_off.png          |  Bin 1929 -> 2209 bytes
 src/images/icons/sensor_baro_on.png           |  Bin 1271 -> 1866 bytes
 src/index.html                                |    4 +-
 src/js/browserMain.js                         |    1 -
 src/js/gui.js                                 |    2 +-
 src/js/main.js                                |   16 +-
 src/js/tabs/cli.js                            |   11 +-
 src/js/tabs/osd.js                            |    2 +-
 src/js/tabs/receiver.js                       |    2 +-
 src/js/tabs/vtx.js                            |   11 +-
 src/tabs/adjustments.html                     |   10 +-
 src/tabs/auxiliary.html                       |   10 +-
 src/tabs/cli.html                             |   13 +-
 src/tabs/configuration.html                   |   61 +-
 src/tabs/failsafe.html                        |   18 +-
 src/tabs/firmware_flasher.html                |  509 +++--
 src/tabs/gps.html                             |   28 +-
 src/tabs/led_strip.html                       |   12 +-
 src/tabs/motors.html                          |  237 ++-
 src/tabs/onboard_logging.html                 |  242 +--
 src/tabs/options.html                         |    2 +-
 src/tabs/osd.html                             |  354 ++--
 src/tabs/pid_tuning.html                      |   43 +-
 src/tabs/ports.html                           |   10 +-
 src/tabs/power.html                           |   58 +-
 .../DetailedDialog/PresetsDetailedDialog.less |    6 +-
 .../presets/SourcesDialog/SourcePanel.css     |    6 +-
 .../presets/SourcesDialog/SourcesDialog.css   |    2 +-
 .../presets/TitlePanel/PresetTitlePanel.css   |   16 +-
 .../presets/TitlePanel/PresetTitlePanel.js    |   12 +-
 src/tabs/presets/presets.html                 |    4 +-
 src/tabs/presets/presets.js                   |   11 +-
 src/tabs/presets/presets.less                 |   38 +-
 src/tabs/receiver.html                        |  232 ++-
 src/tabs/setup.html                           |    6 +-
 src/tabs/vtx.html                             |  461 +++--
 84 files changed, 3488 insertions(+), 6309 deletions(-)
 delete mode 100644 src/css/dropdown-lists/LICENSE
 delete mode 100644 src/css/dropdown-lists/css/style_lists.css
 create mode 100644 src/images/corner.svg
 create mode 100644 src/images/dark-wide-2-compact.svg
 create mode 100644 src/images/dark-wide-2.svg

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 9c2b67c2a2..994a6f5f7b 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -3427,7 +3427,7 @@
         "message": "Select build type to see available boards."
     },
     "firmwareFlasherOnlineSelectBoardDescription": {
-        "message": "Select or auto-detect your board to see available online firmware releases - Select the correct firmware appropriate for your board."
+        "message": "Select or detect your board to see available online firmware releases - Select the correct firmware appropriate for your board."
     },
     "firmwareFlasherOnlineSelectBoardHint": {
         "message": "Betaflight configurator supports flashing of Unified Targets with the respective board specific configurations in one step.<br><br>The concept of Unified Targets means that the same firmware .hex file can be used for all boards using the same MCU.<br><br>Betaflight 4.4 introduces <strong>Cloud Build</strong><br><br>With <strong>Cloud Build</strong> we need to define hardware options present on your build.<br><br>To make the different boards work with the same firmware, a specific configuration file is deployed alongside the firmware when a Unified Target is flashed.<br><br>With Local build you can load a unified target configuration file or chose a board before loading a firmware .hex file.<br><br>If you encounter problems using the firmware, please consider joining Discord or open an <a href=\"https://github.com/betaflight/betaflight/issues\" target=\"_blank\" rel=\"noopener noreferrer\">issue</a>."
@@ -3442,7 +3442,7 @@
         "message": "Flash on connect"
     },
     "firmwareFlasherFlashOnConnectDescription": {
-        "message": "Attempt to flash the board automatically (triggered by newly detected serial port).<br /><br /><span class=\"message-negative\">WARNING</span>: this function disables the auto-detect and backup feature."
+        "message": "Attempt to flash the board automatically (triggered by newly detected serial port).<br /><br /><span class=\"message-negative\">WARNING</span>: this function disables the detect and backup features."
     },
     "firmwareFlasherFullChipErase": {
         "message": "Full chip erase"
@@ -3620,10 +3620,10 @@
         "message": "Continue"
     },
     "firmwareFlasherDetectBoardButton": {
-        "message": "Auto-detect"
+        "message": "Detect"
     },
     "firmwareFlasherDetectBoardDescriptionHint": {
-        "message": "Auto-detect only works when not in DFU mode and when MSP communication is working. Sometimes you have to retry a few times or even reconnect USB. Try connecting as normal first as you could have forgotten to apply custom defaults. Please reboot after flashing - replug your USB."
+        "message": "Detect only works when not in DFU mode and when MSP communication is working. Sometimes you have to retry a few times or even reconnect USB. Try connecting as normal first as you could have forgotten to apply custom defaults. Please reboot after flashing - replug your USB."
     },
     "firmwareFlasherDetectBoardQuery": {
         "message": "Query board information to preselect right firmware"
diff --git a/src/components/betaflight-logo/BetaflightLogo.vue b/src/components/betaflight-logo/BetaflightLogo.vue
index e0ffec226e..54e2cca497 100644
--- a/src/components/betaflight-logo/BetaflightLogo.vue
+++ b/src/components/betaflight-logo/BetaflightLogo.vue
@@ -42,22 +42,23 @@ export default {
 .logo {
   height: 70px;
   width: 240px;
-  background-image: url(../../images/light-wide-2.svg);
+  background-image: url(../../images/dark-wide-2.svg);
   background-repeat: no-repeat;
   background-position: left center;
   background-size: contain;
   position: relative;
-  margin-top: -25px;
+}
+
+.dark-theme .logo {
+  background-image: url(../../images/light-wide-2.svg);
 }
 
 .logo_text {
   position: absolute;
   left: 80px;
   top: 49px;
-  color: #949494;
-  opacity: 0.5;
+  color: var(--text);
   font-size: 10px;
-  min-width: 210px;
   display: flex;
   flex-direction: column;
 }
@@ -70,17 +71,20 @@ export default {
   .logo {
     height: 24px;
     width: 150px;
-    background-image: url(../../images/light-wide-2-compact.svg);
+    background-image: url(../../images/dark-wide-2-compact.svg);
     background-position: left center;
     order: 2;
     margin-top: 0;
   }
+  .dark-theme .logo {
+    background-image: url(../../images/light-wide-2-compact.svg);
+  }
   .logo_text {
     display: none !important;
   }
   .tab_container .logo {
     display: block;
-    background-image: url(../../images/light-wide-2.svg);
+    background-image: url(../../images/dark-wide-2.svg);
     background-repeat: no-repeat;
     background-position: center 20px;
     background-position-x: 12px;
@@ -91,6 +95,9 @@ export default {
     position: relative;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   }
+  .dark-theme .tab_container .logo {
+    background-image: url(../../images/light-wide-2.svg);
+  }
   .tab_container .logo .logo_text {
     display: flex !important;
     left: 82px;
diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 9734ff9ad8..cc5ee76148 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -78,12 +78,10 @@ export default {
         rgba(0, 0, 0, 0.55)
     );
     padding-top: 5px;
-    text-shadow: 0 1px #000000;
 }
 .noflash_global {
     color: #868686;
     text-align: center;
-    text-shadow: 0 1px #000000;
     margin-top: 2px;
 }
 
@@ -105,7 +103,7 @@ export default {
     border-radius: 2px;
     width: 25%;
     display: block;
-    background-color: var(--accent);
+    background-color: var(--primary-500);
 }
 .dataflash-contents_global div span {
     position: absolute;
diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index 01742285bd..47d0983e74 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -1,14 +1,13 @@
 <template>
   <div
     id="firmware-virtual-option"
+    :style="{ display: isVirtual ? 'block' : 'none' }"
   >
     <div class="dropdown dropdown-dark">
       <select
         id="firmware-version-dropdown"
-        :value="value"
         class="dropdown-select"
         :title="$t('virtualMSPVersion')"
-        @input="$emit('input', $event.target.value)"
       >
         <option
           v-for="(version, index) in firmwareVersions"
@@ -24,179 +23,23 @@
 
 <script>
 export default {
-  props: {
-    value: {
-        type: String,
-        default: "1.46.0",
+    props: {
+        isVirtual: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            firmwareVersions: [
+                { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
+                { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
+                { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
+                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
+                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
+                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
+            ],
+        };
     },
-  },
-  data() {
-    return {
-      firmwareVersions: [
-        { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
-        { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
-        { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
-      ],
-    };
-  },
 };
 </script>
-
-<style scoped>
-#firmware-virtual-option {
-    height: 76px;
-    width: 180px;
-    margin-right: 15px;
-    margin-top: 0px;
-    display: block;
-}
-.dropdown {
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    height: 20px;
-    background: #fff;
-    background-image: -webkit-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.06)
-    );
-    background-image: -moz-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.06)
-    );
-    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
-    background-image: linear-gradient(
-        to bottom,
-        transparent,
-        rgba(0, 0, 0, 0.06)
-    );
-    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-    width: 99%;
-    margin-bottom: 7px;
-    border: 1px solid;
-    border-color: #ccc #ccc #ccc;
-    border-radius: 3px;
-}
-
-.dropdown:before,
-.dropdown:after {
-    content: "";
-    position: absolute;
-    z-index: 2;
-    top: 7px;
-    right: 7px;
-    width: 0;
-    height: 0;
-    border: 4px dashed;
-    border-color: #888 transparent;
-    pointer-events: none;
-}
-
-.dropdown:before {
-    border-bottom-style: solid;
-    border-top: none;
-    margin-top: -2px;
-}
-
-.dropdown:after {
-    margin-top: 5px;
-    border-top-style: solid;
-    border-bottom: none;
-}
-
-.dropdown-select {
-    position: relative;
-    overflow: visible;
-    width: 100%;
-    margin-top: 0px;
-    padding: 1px 8px 6px 5px;
-    height: 23px;
-    line-height: 20px;
-    font-size: 12px;
-    color: #62717a;
-    text-shadow: 0 1px white;
-    /* Fallback for IE 8 */
-    background: #f2f2f2;
-    /* "transparent" doesn't work with Opera */
-    background: rgba(0, 0, 0, 0) !important;
-    border: 0;
-    border-radius: 0;
-    -webkit-appearance: none;
-    appearance: "none";
-}
-
-.dropdown-select:focus {
-    z-index: 3;
-    width: 90%;
-    color: #4fa619;
-    outline: 0px solid #49aff2;
-    outline: 0px solid -webkit-focus-ring-color;
-    outline-offset: 5px;
-    height: 25px;
-}
-
-.dropdown-select > option {
-    margin: 3px;
-    padding: 6px 8px;
-    text-shadow: none;
-    background: #f2f2f2;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
-.dropdown-dark {
-    background: #636363; /* NEW2 */
-    background: #3e403f; /* NEW */
-    border-color: #111 #0a0a0a black;
-    background-image: -webkit-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    background-image: -moz-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-    background-image: linear-gradient(
-        to bottom,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
-        0 1px 1px rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
-        0 1px 1px rgba(0, 0, 0, 0.2);
-    color: #a6a6a6;
-    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
-}
-
-.dropdown-dark:before {
-    border-bottom-color: #aaa;
-}
-
-.dropdown-dark:after {
-    border-top-color: #aaa;
-}
-
-.dropdown-dark .dropdown-select {
-    color: #a6a6a6;
-    text-shadow: 0 1px black;
-    width: calc(100% - 10px);
-    /* Fallback for IE 8 */
-    background: #444;
-}
-
-.dropdown-dark .dropdown-select:focus {
-    color: #fff;
-}
-
-.dropdown-dark .dropdown-select > option {
-    background: #56ab1a;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.4);
-}
-</style>
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index fbecfc1aa6..e3f0c95fe8 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -1,13 +1,16 @@
 <template>
-  <div id="port-override-option">
+  <div
+    id="port-override-option"
+    style="display: none"
+    :style="{ display: isManual ? 'flex' : 'none' }"
+  >
     <label
       for="port-override"
     ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
-        :value="value"
         type="text"
-        @change="inputValue($event)"
+        value="/dev/rfcomm0"
       ></label>
   </div>
 </template>
@@ -16,51 +19,21 @@
 import { set as setConfig } from '../../js/ConfigStorage';
 
 export default {
-  props: {
-    value: {
-      type: String,
-      default: "/dev/rfcomm0",
+    props: {
+        isManual: {
+            type: Boolean,
+            default: true,
+        },
     },
-  },
-  methods: {
-    inputValue(event) {
-      setConfig({'portOverride': event.target.value});
-      this.$emit("input", event.target.value);
-    },
-  },
 };
 </script>
-<style scoped>
+
+<style lang="less" scoped>
 #port-override-option {
-    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
-    font-size: 12px;
-    margin-top: 4px;
-    margin-right: 15px;
     label {
-        background-color: #2b2b2b;
-        border-radius: 3px;
-        padding: 3px;
-        color: var(--subtleAccent);
-    };
-    display: block;
-}
-
-#port-override-option label {
-    background-color: #2b2b2b;
-    border-radius: 3px;
-    /* might be less */
-    padding: 2px;
-    color: var(--subtleAccent);
-}
-
-#port-override {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: #888888;
-    width: 140px;
-    margin-left: 2px;
-    padding: 1px;
-    border-radius: 3px;
-    height: 15px;
-    font-size: 12px;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
 }
 </style>
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 38d92bb941..778d0d4029 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -80,6 +80,10 @@ export default {
 <style scoped>
 .web-port-picker {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
     margin-left: auto;
+    align-items: start;
+    gap: 0.5rem;
 }
 </style>
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index b2ff8ae857..2be759251a 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     id="portsinput"
-    style="width: 220px"
   >
     <div class="dropdown dropdown-dark">
       <select
@@ -169,88 +168,3 @@ export default {
 };
 
 </script>
-<style scoped>
-#portsinput {
-    width: 220px;
-    margin-right: 15px;
-    .dropdown {
-        margin-bottom: 5px;
-    }
-}
-#portsinput .dropdown {
-    margin-bottom: 5px;
-}
-
-.dropdown-dark .dropdown-select {
-    color: #a6a6a6;
-    text-shadow: 0 1px black;
-    width: calc(100% - 10px);
-    background: #444;
-}
-
-.dropdown-dark {
-    background: #636363; /* NEW2 */
-    background: #3e403f; /* NEW */
-    border-color: #111 #0a0a0a black;
-    background-image: -webkit-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    background-image: -moz-linear-gradient(
-        top,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-    background-image: linear-gradient(
-        to bottom,
-        transparent,
-        rgba(0, 0, 0, 0.4)
-    );
-    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
-        0 1px 1px rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
-        0 1px 1px rgba(0, 0, 0, 0.2);
-    color: #a6a6a6;
-    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
-}
-
-.dropdown-dark:before {
-    border-bottom-color: #aaa;
-}
-
-.dropdown-dark:after {
-    border-top-color: #aaa;
-}
-
-.dropdown-dark .dropdown-select {
-    color: #a6a6a6;
-    text-shadow: 0 1px black;
-    width: calc(100% - 10px);
-    /* Fallback for IE 8 */
-    background: #444;
-}
-
-.dropdown-dark .dropdown-select:focus {
-    color: #fff;
-}
-
-.dropdown-dark .dropdown-select > option {
-    background: #56ab1a;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.4);
-}
-#auto-connect-and-baud {
-    float: right;
-
-    .auto_connect {
-      color: var(--subtleAccent);
-    }
-}
-
-#baudselect {
-    width: 80px;
-    float: right;
-    margin-right: 2px;
-}
-</style>
diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue
index 36ee5420b2..26250bf9ef 100644
--- a/src/components/quad-status/BatteryIcon.vue
+++ b/src/components/quad-status/BatteryIcon.vue
@@ -86,7 +86,7 @@ export default {
 
 .quad-status-contents progress::-webkit-progress-bar {
   height: 12px;
-  background-color: #eee;
+  background-color: var(--surface-300);
 }
 
 .quad-status-contents progress::-webkit-progress-value {
@@ -115,7 +115,7 @@ export default {
     background-color: transparent;
   }
   50% {
-    background-color: var(--error);
+    background-color: var(--error-500);
   }
 }
 
@@ -123,7 +123,7 @@ export default {
   background-color: #59aa29;
 }
 .battery-status.state-warning {
-  background-color: var(--error);
+  background-color: var(--error-500);
 }
 
 .battery-status.state-empty {
diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue
index e50599e512..1ca600f859 100644
--- a/src/components/quad-status/BottomStatusIcons.vue
+++ b/src/components/quad-status/BottomStatusIcons.vue
@@ -65,13 +65,13 @@ button {
     border-radius: 4px;
     background-color: #ccc;
     color: #666;
-    border: 1px solid var(--subtleAccent);
+    border: 1px solid var(--surface-500);
     font-weight: 600;
     font-size: 10pt;
     cursor: pointer;
 }
 button.active {
-    background-color: var(--accent);
+    background-color: var(--primary-500);
     border: 1px solid #dba718;
     color: #000;
 }
diff --git a/src/components/sensor-status/SensorStatus.vue b/src/components/sensor-status/SensorStatus.vue
index e5d4fc519d..cbb41bbba2 100644
--- a/src/components/sensor-status/SensorStatus.vue
+++ b/src/components/sensor-status/SensorStatus.vue
@@ -143,7 +143,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
 #sensor-status ul {
     font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
     font-size: 12px;
@@ -168,7 +168,6 @@ li {
     );
     padding-left: 5px;
     padding-right: 5px;
-    text-shadow: 0 1px rgba(0, 0, 0, 1);
     &:last-child {
         border-right: 0 solid #c0c0c0;
         border-top-right-radius: 5px;
@@ -199,7 +198,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_gyro_off.png);
     background-size: 43px;
@@ -211,7 +210,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_acc_off.png);
     background-size: 40px;
@@ -223,7 +222,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_mag_off.png);
     background-size: 42px;
@@ -235,7 +234,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_sat_off.png);
     background-size: 42px;
@@ -247,7 +246,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_baro_off.png);
     background-size: 40px;
@@ -259,7 +258,7 @@ div {
     margin-top: 3px;
     width: 100%;
     padding-top: 40px;
-    color: #4f4f4f;
+    color: var(--text);
     text-align: center;
     background-image: url(../../images/icons/sensor_sonar_off.png);
     background-size: 41px;
diff --git a/src/components/status-bar/PortUtilization.vue b/src/components/status-bar/PortUtilization.vue
index 48a4ae534e..7664ddd840 100644
--- a/src/components/status-bar/PortUtilization.vue
+++ b/src/components/status-bar/PortUtilization.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span>{{ $t("statusbar_port_utilization") }}</span>
+    <span class="message">{{ $t("statusbar_port_utilization") }}</span>
     <ReadingStat
       message="statusbar_usage_download"
       :value="usageDown"
diff --git a/src/components/status-bar/ReadingStat.vue b/src/components/status-bar/ReadingStat.vue
index 8307491988..d29bce4e10 100644
--- a/src/components/status-bar/ReadingStat.vue
+++ b/src/components/status-bar/ReadingStat.vue
@@ -1,8 +1,8 @@
 <template>
   <span>
-    <span>{{ $t(message) }}</span>
-    <span>{{ value }}</span>
-    <span v-if="unit">{{ unit }}</span>
+    <span class="message">{{ $t(message) }}</span>
+    <span class="value">{{ value }}</span>
+    <span class="unit" v-if="unit">{{ unit }}</span>
   </span>
 </template>
 
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index 7e8ba4bc56..7b58dea24d 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -87,24 +87,26 @@ export default {
 };
 </script>
 
-<style>
+<style lang="less">
 /** Status bar **/
 #status-bar {
-  position: fixed;
   display: flex;
-  gap: 10px;
+  white-space: nowrap;
+  gap: 0.5rem;
   bottom: 0;
   width: calc(100% - 20px);
   height: 20px;
   line-height: 20px;
-  padding: 0 10px 0 10px;
-  border-top: 1px solid #7d7d79;
-  background-color: #bfbeb5;
+  padding: 0.5rem 1rem;
+  background-color: var(--surface-300);
+  .message {
+    margin-right: 0.25rem;
+  }
 }
 
 #status-bar > * ~ * {
   padding-left: 10px;
-  border-left: 1px solid #7d7d79;
+  border-left: 1px solid var(--surface-400);
 }
 
 /** Status bar (phones) **/
diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less
index 5dedd2b864..fad75002a8 100644
--- a/src/css/dark-theme.less
+++ b/src/css/dark-theme.less
@@ -1,120 +1,4 @@
 body.dark-theme {
-
-    --accent: #ffbb00;
-    --subtleAccent: #9c9c9c;
-    --quietHeader: #bf8606;
-    --defaultText: #ffffff;
-    --subtleText: #c0c0c0;
-    --mutedText: #d6d6d6;
-    --linkText: #ffc549;
-    --boxBackground: #3a3a3a;
-    --alternativeBackground: #4e4e4e;
-    --sideBackground: #404040;
-    --ledAccent: #6e6e6e;
-    --ledBackground: #424242;
-    --gimbalBackground: var(--subtleAccent);
-    --gimbalCrosshair: var(--mutedText);
-    --switcherysecond: #858585;
-    --pushedButton-background:  #616161;
-    --pushedButton-fontColor:  #ffffff;
-    --hoverButton-background: #ffcc3e;
-    --superSubtleAccent: #595959;
-    --accentBorder: #bf8606;
-
-    color: white;
-
-    .background_paper {
-        background-image: url(../images/paper-dark.png);
-    }
-
-    &::backdrop {
-        background-image: none;
-        background-color: rgba(0, 0, 0, 0.5);
-    }
-    #options-window {
-        background-color: #393b3a;
-    }
-    #content {
-        background-color: #393b3a;
-    }
-    #content.logopen {
-        background-color: #393b3a;
-    }
-
-    /* NOTE: need to think on how to load the dark theme with vue */
-    #status-bar {
-        background-color: #414443 !important;
-        >* {
-            ~* {
-                border-left: 1px solid #9c9c9c;
-            }
-        }
-    }
-    dialog {
-        background-color: #3a3d3c;
-        color: white;
-        border: 1px solid #ffbb2a;
-    }
-    .note {
-        background-color: #4e4e4e;
-        color: white;
-    }
-    .content_toolbar {
-        background-color: #555857;
-        .btn {
-            a {
-                border: 1px solid #ffbb2a;
-            }
-            a.disabled {
-                border: 1px solid #ffbb2a;
-            }
-        }
-    }
-    .gui_box {
-        border: 1px solid #4d4d4d;
-        background-color: #393b3a;
-    }
-    .gui_warning {
-        background: #393b3a;
-    }
-    .gui_note {
-        background: #393b3a;
-        .gui_box_titlebar {
-            color: black;
-        }
-    }
-    .grey {
-        background-color: #414443;
-    }
-    .gui_box_bottombar {
-        background-color: #393b3a;
-    }
-    .fixed_band {
-        background-color: #393b3a;
-    }
-    .default_btn {
-        a.disabled {
-            background-color: #393b3a;
-            border: 1px solid #ffbb2a;
-        }
-    }
-    .small {
-        a {
-            border: 1px solid #ffbb2a;
-        }
-    }
-    .standard_input {
-        background: var(--boxBackground);
-        color: white;
-    }
-    #quad-status_wrapper {
-        color: #393b3a;
-    }
-    button {
-        border: 1px solid #ffbb2a;
-        background-color: #ffbb2a;
-        color: black;
-    }
     .helpicon {
         background-image: url(../images/icons/cf_icon_info_white.svg);
         opacity: 0.3;
@@ -134,172 +18,7 @@ body.dark-theme {
             background-image: url(../images/icons/cf_icon_info_grey.svg);
         }
     }
-    .cf_table {
-        td {
-            border-style: solid;
-        }
-        tr {
-            &:last-child {
-                td {
-                    border-style: unset;
-                }
-            }
-        }
-    }
-    .noUi-pips {
-        color: var(--mutedText);
-    }
-    .jBox-container {
-        background: #393b3a;
-        color: white;
-    }
-    .jBox-Modal {
-        .jBox-title {
-            background: #393b3a;
-            border-bottom: 1px solid #9c9c9c;
-            text-shadow: 0 1px 1px #ffffff;
-            color: white;
-        }
-    }
-    .jBox-Confirm {
-        .jBox-title {
-            background: #393b3a;
-            border-bottom: 1px solid #9c9c9c;
-            text-shadow: 0 1px 1px #ffffff;
-            color: white;
-        }
-    }
-    .jBox-pointer {
-        &:after {
-            background: #393b3a;
-        }
-    }
-    .tab-adjustments {
-        .adjustment {
-            &:nth-child(odd) {
-                background-color: #2f2f2f;
-            }
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .adjustments {
-            background-color: #393b3a;
-            td {
-                border-top: 1px solid #00000000;
-                border-bottom: 1px solid #00000000;
-            }
-        }
-    }
-    .tab-auxiliary {
-        .toolbox {
-            color: white;
-        }
-        .mode {
-            background-color: #393b3a;
-            .info {
-                background-color: #9e9e9e;
-                color: white;
-            }
-        }
-        .ranges {
-            border-bottom: 5px solid #8a8a8a;
-            background-color: #676767;
-        }
-        .range {
-            background-color: #484848;
-            .channel {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .link {
-            background-color: #484848;
-        }
-        .buttons {
-            a {
-                background-color: #333333;
-                color: white;
-                &:hover {
-                    background-color: var(--hoverButton-background);
-                }
-            }
-        }
-    }
-    .logic {
-        background-color: #3a3a3a;
-        color: white;
-    }
-    .linkedTo {
-        background-color: #3a3a3a;
-        color: white;
-    }
-    .tab-cli {
-        textarea[name='commands'] {
-            &::placeholder {
-                color: silver;
-            }
-            background: black;
-            color: white;
-        }
-    }
-    .cli-textcomplete-dropdown {
-        background-color: #393b3a;
-        a {
-            color: white;
-        }
-        .active {
-            background-color: var(--quietHeader);
-        }
-    }
-    .tab-configuration {
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-        input {
-            background-color: #3a3a3a;
-            color: white;
-        }
-        select {
-            background-color: #3a3a3a;
-            color: white;
-        }
-    }
     .tab-failsafe {
-        .number {
-            input {
-                background-color: #3a3a3a;
-                color: white;
-                &:disabled {
-                    background-color: #393b3a;
-                    color: grey;
-                }
-            }
-        }
-        .radioarea {
-            background-color: #393b3a;
-        }
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-        .stage1 {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .modename {
-            background-color: #393b3a;
-        }
-        .switchMode {
-            background-color: #3a3a3a;
-            color: white;
-        }
         .pro1 {
             background-image: url(../images/icons/cf_failsafe_procedure1-dark.svg);
         }
@@ -310,156 +29,16 @@ body.dark-theme {
             background-image: url(../images/icons/cf_failsafe_procedure4-dark.svg);
         }
     }
-    .btn {
-        .disabled {
-            background-color: #393b3a;
-        }
-    }
-    .tab-firmware_flasher {
-        .build_configuration {
-            .select2 {
-                color: #424242;
-                .selection {
-                    .select2-selection {
-                        background-color: #575757;
-                    }
-                }
-            }
-            input {
-                background-color: #3a3a3a;
-                color: white;
-            }
-            select {
-                background-color: #424242;
-                color: white;
-            }
-        }
-        .options {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-            .description {
-                color: #b9b9b9;
-            }
-            .manual_baud_rate {
-                select {
-                    background-color: #3a3a3a;
-                    color: white;
-                }
-            }
-        }
-        .release_info {
-            .target {
-                color: white;
-            }
-            .buildProgress {
-                border: 1px solid var(--subtleAccent);
-                border-radius: 2px;
-            }
-        }
-        .cf_table {
-            td {
-                border-bottom: solid 1px #4f4f4f;
-            }
-        }
-    }
-    .tab-gps {
-        .GPS_info {
-            .head {
-                background-color: #393b3a;
-            }
-        }
-        .GPS_signal_strength {
-            .head {
-                background-color: #393b3a;
-            }
-        }
-        #loadmap {
-            .controls {
-                background-color: #393b3a;
-                a {
-                    background-color: #393b3a;
-                    &:hover {
-                        background-color: var(--hoverButton-background);
-                    }
-                    &:active {
-                        background-color: #393b3a;
-                    }
-                }
-            }
-        }
-    }
-    progress[value] {
-        &::-webkit-progress-bar {
-            background-color: #393b3a;
-        }
-    }
     .tab-landing {
-        background-color: #3e3e3e;
         background-image: url(../../images/pattern_dark.png);
-        .content_mid {
-            background-color: #3e3e3e;
-            .text3 {
-                .wrap2 {
-                    background: #5f5f5f;
-                }
-            }
-        }
         .logowrapper {
             img {
                 content: url(../images/bf_logo_black.svg);
             }
         }
     }
-    .tab-led-strip {
-        .section {
-            color: #c4c4c4;
-        }
-        .mainGrid {
-            background-color: #4e4e4e;
-        }
-        button {
-            background-color: #6b6b6b;
-            color: white;
-            &:hover {
-                border: 1px solid #ffffff;
-                background-color: #393b3a;
-            }
-        }
-        .gridSections {
-            border: none;
-            .block {
-                border: none;
-            }
-        }
-    }
-    .tab-logging {
-        .speed {
-            background-color: #3a3a3a;
-            color: white;
-        }
-    }
     .tab-motors {
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-        input {
-            background-color: #3a3a3a;
-            color: white;
-        }
-        select {
-            background-color: #3a3a3a;
-            color: white;
-        }
         .plot_control {
-            background-color: #393b3a;
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
             .x {
                 background-color: #00A8F0;
             }
@@ -470,26 +49,6 @@ body.dark-theme {
                 background-color: #CB4B4B;
             }
         }
-        .motorblock {
-            background-color: #393b3a;
-        }
-        .m-block {
-            background-color: #393b3a;
-            .label {
-                color: white;
-            }
-            .meter-bar {
-                background-color: #393b3a;
-            }
-        }
-        .motor_testing {
-            .notice {
-                background-color: #4e4e4e;
-            }
-        }
-        text {
-            fill: white;
-        }
         .line {
             &:nth-child(1) {
                 stroke: #00A8F0;
@@ -502,80 +61,6 @@ body.dark-theme {
             }
         }
     }
-    .tab-onboard_logging {
-        .regular-button.disabled {
-            background-color: #393b3a;
-        }
-        .dataflash-contents {
-            background-color: #393b3a;
-        }
-        .sdcard-contents {
-            background-color: #393b3a;
-        }
-        .dataflash-used {
-            background-color: #848484;
-        }
-        .sdcard-other {
-            background-color: #848484;
-        }
-        progress {
-            &::-webkit-progress-bar {
-                background-color: #393b3a;
-            }
-        }
-        .blackboxRate {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .blackboxDebugMode {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .blackboxDevice {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .sdcard-icon {
-            background-color: #393b3a;
-        }
-    }
-    .tab-osd {
-        .display-layout {
-            input.position {
-                border-bottom: 1px solid red;
-            }
-        }
-        .preview {
-            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/osd-bg-1.jpg);
-            background-size: cover;
-        }
-        input[type='checkbox'] {
-            &:after {
-                line-height: 1.5em;
-                content: none;
-                display: inline-block;
-                width: 12px;
-                height: 12px;
-                margin-top: -1px;
-                margin-left: -1px;
-                border: 1px solid #404040;
-                border-radius: 0.25em;
-                background: #4d4d4d;
-            }
-            &:checked {
-                &:after {
-                    background: #ffbb00;
-                    border: 1px solid #404040;
-                }
-            }
-        }
-    }
     .tab-pid_tuning {
         .profile {
             .helpicon {
@@ -585,10 +70,6 @@ body.dark-theme {
                     opacity: 1;
                 }
             }
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
         }
         .rate_profile {
             .helpicon {
@@ -598,10 +79,6 @@ body.dark-theme {
                     opacity: 1;
                 }
             }
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
         }
         .pid_titlebar {
             .helpicon {
@@ -611,122 +88,8 @@ body.dark-theme {
                     opacity: 1;
                 }
             }
-            .wide_header {
-                border-top-left-radius: 3px;
-                border-top-right-radius: 3px;
-            }
-        }
-        .throttle_limit {
-            th {
-                background-color: #393b3a;
-                border-bottom: 1px solid #5e5e5e;
-            }
-        }
-        .cf {
-            tr {
-                background-color: #414443;
-            }
-            th {
-                background-color: var(--quietHeader);
-                color: white;
-            }
-            input {
-                background-color: #3a3a3a;
-                color: white;
-                &:disabled {
-                    color: rgb(105, 105, 105);
-                    background-color: #2d2d2d;
-                }
-            }
-            select {
-                background-color: #3a3a3a;
-                color: white;
-                &:disabled {
-                    color: rgb(105, 105, 105);
-                    background-color: #2d2d2d;
-                }
-            }
-            .rates_logo_bg {
-                background-color: #ffffff33;
-            }
-        }
-        table.compensation {
-            .suboption {
-                select {
-                    background-color: #3a3a3a;
-                    color: white;
-                }
-            }
-            tr {
-                border-bottom: 1px solid #6b6b6b;
-            }
-        }
-        table {
-            input {
-                background-color: #3a3a3a;
-                color: white;
-            }
-            select {
-                text-align-last: right;
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .tab-container {
-            >div {
-                border-right: 1px solid #393b3a;
-
-                &:not(.active) {
-                    background-color: #535655;
-                }
-            }
-        }
-        .number {
-            input {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-        .bottomarea {
-            background-color: #393b3a;
-        }
-        .regular-button.disabled {
-            background-color: #393b3a;
-        }
-        .sliderLabels {
-            th {
-                background: #414443;
-                color: white;
-            }
-        }
-        input {
-            &:disabled {
-                color: rgb(105, 105, 105);
-                background-color: #2d2d2d;
-            }
-        }
-        select {
-            &:disabled {
-                color: rgb(105, 105, 105);
-                background-color: #2d2d2d;
-            }
-        }
-        .slidersWarning {
-            background: #542415;
         }
     }
-    .inputBackground {
-        background-color: #3a3a3a;
-        color: white;
-    }
-    .fancy.header {
-        background-color: #393b3a;
-    }
     .pid_roll {
         background-color: #A00000;
     }
@@ -736,127 +99,8 @@ body.dark-theme {
     .pid_yaw {
         background-color: #0000A0;
     }
-    .pid_mode {
-        background-color: #3c3c3c;
-        border-bottom: 1px solid #3c3c3c;
-        color: white;
-    }
-    .pid_titlebar {
-        background-color: #393b3a;
-    }
-    .tabarea {
-        background: #393b3a;
-    }
-    .tab-ports {
-        table {
-            td {
-                &:first-child {
-                    border-left: none;
-                }
-                &:last-child {
-                    border-right: none;
-                }
-                border-bottom: 1px solid #575757;
-                border-left: 1px solid #575757;
-                border-right: 1px solid #575757;
-            }
-        }
-        .ports {
-            tr {
-                &:last-child {
-                    border-bottom: none;
-                    td {
-                        border-bottom: none;
-                    }
-                }
-            }
-        }
-    }
-    .tab-power {
-        .number {
-            input {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .battery-configuration {
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-    }
-    .tab-receiver {
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-        input {
-            background-color: #3a3a3a;
-            color: white;
-        }
-        select {
-            background-color: #3a3a3a;
-            color: white;
-        }
-        .bars {
-            .meter-bar {
-                background-color: #393b3a;
-                .label {
-                    color: white;
-                }
-            }
-        }
-        .tunings {
-            background-color: #393b3a;
-            table {
-                td {
-                    background: #414443;
-                }
-                tr {
-                    &:nth-child(odd) {
-                        background-color: #393b3a;
-                    }
-                }
-                input {
-                    background-color: #3a3a3a;
-                    color: white;
-                }
-            }
-        }
-        .rssi_channel_wrapper {
-            background-color: #414443;
-            border-bottom: 1px solid #4d4d4d;
-            border-right: 1px solid #4d4d4d;
-        }
-        .rcmap_wrapper {
-            background-color: #414443;
-            border-left: 1px solid #4d4d4d;
-            border-bottom: 1px solid #4d4d4d;
-        }
-        .hybrid_element {
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-            input {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .plot_control {
-            background-color: #2f2f2f;
-        }
-        text {
-            fill: white;
-        }
-    }
     .tab-sensors {
         .plot_control {
-            background-color: #2f2f2f;
-            select {
-                background-color: #3a3a3a;
-                color: white;
-            }
             .x {
                 background-color: #00A8F0;
             }
@@ -891,116 +135,8 @@ body.dark-theme {
                 }
             }
         }
-        text {
-            fill: white;
-        }
-    }
-    .tab-servos {
-        table {
-            th {
-                background: #828885;
-            }
-            tr {
-                &:nth-child(even) {
-                    background-color: #2f2f2f;
-                }
-            }
-            .main {
-                background-color: #393b3a;
-            }
-            input[type="number"] {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .direction {
-            .rate {
-                background-color: #3a3a3a;
-                color: white;
-            }
-        }
-        .servoblock {
-            background-color: #393b3a;
-            color: white;
-        }
-        .m-block {
-            .label {
-                color: white;
-            }
-            .meter-bar {
-                background-color: #393b3a;
-            }
-        }
-    }
-    .tab-setup {
-        #interactive_block {
-            background-color: #393b3a;
-            a.reset {
-                color: white;
-                background-color: #575757;
-                &:hover {
-                    background-color: #393b3a;
-                }
-            }
-        }
-        .attitude_info {
-            color: white;
-        }
-        .dialogBuildInfo {
-            background-color: #575757;
-        }
-    }
-    .tab-transponder {
-        .text {
-            .disabled {
-                background-color: #393b3a;
-            }
-        }
-        .gui_box {
-            span {
-                color: white;
-            }
-        }
-    }
-    .select2-container {
-        .select2-selection--single {
-            .select2-selection__rendered {
-                background-color: #3a3a3a !important;
-            }
-        }
-    }
-    .select2-selection__arrow {
-        b {
-            border-bottom: 1.5px solid white !important;
-            border-right: 1.5px solid white !important;
-        }
-    }
-    .select2-search--dropdown {
-        background-color: #3a3a3a !important;
-        .select2-search__field {
-            border: 1px solid var(--subtleAccent) !important;
-            background-color: #3a3a3a !important;
-            color: white !important;
-        }
-    }
-    .select2-results {
-        >.select2-results__options {
-            background-color: #3a3a3a !important;
-        }
-    }
-    .ms-drop {
-        ul {
-            >li.hide-radio {
-                &:focus {
-                    background-color: var(--subtleAccent);
-                }
-                &:hover {
-                    background-color: var(--subtleAccent);
-                }
-            }
-        }
     }
     .invertable {
         filter: invert(1)
     }
-}
\ No newline at end of file
+}
diff --git a/src/css/dropdown-lists/LICENSE b/src/css/dropdown-lists/LICENSE
deleted file mode 100644
index cade13ffd1..0000000000
--- a/src/css/dropdown-lists/LICENSE
+++ /dev/null
@@ -1,20 +0,0 @@
-Copyright (c) 2012-2013 Thibaut Courouble
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/src/css/dropdown-lists/css/style_lists.css b/src/css/dropdown-lists/css/style_lists.css
deleted file mode 100644
index f52b2a34b3..0000000000
--- a/src/css/dropdown-lists/css/style_lists.css
+++ /dev/null
@@ -1,148 +0,0 @@
-
-/*
- * Copyright (c) 2012-2013 Thibaut Courouble
- * http://www.cssflow.com
- *
- * Licensed under the MIT License:
- * http://www.opensource.org/licenses/mit-license.php
- */
-
-
-
-
-.dropdown {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  height: 20px;
-  background: #fff;
-  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
-  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
-  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
-  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-  width:99%;
-  margin-bottom:7px;
-  border: 1px solid;
-  border-color: #ccc #ccc #ccc;
-  border-radius: 3px;
-}
-
-.dropdown:before, .dropdown:after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  top: 7px;
-  right: 7px;
-  width: 0;
-  height: 0;
-  border: 4px dashed;
-  border-color: #888 transparent;
-  pointer-events: none;
-}
-
-.dropdown:before {
-  border-bottom-style: solid;
-  border-top: none;
-    margin-top: -2px;
-
-}
-
-.dropdown:after {
-  margin-top: 5px;
-  border-top-style: solid;
-  border-bottom: none;
-}
-
-.dropdown-select {
-  position: relative;
-  overflow:visible;
-  width: 100%;
-  margin-top:0px;
-  padding: 1px 8px 6px 5px;
-  height: 23px;
-  line-height: 20px;
-  font-size: 12px;
-  color: #62717a;
-  text-shadow: 0 1px white;
-  /* Fallback for IE 8 */
-  background: #f2f2f2;
-  /* "transparent" doesn't work with Opera */
-  background: rgba(0, 0, 0, 0) !important;
-  border: 0;
-  border-radius: 0;
-  -webkit-appearance: none;
-}
-
-.dropdown-select:focus {
-  z-index: 3;
-  width: 90%;
-  color: #4fa619;
-  outline: 0px solid #49aff2;
-  outline: 0px solid -webkit-focus-ring-color;
-  outline-offset: 5px;
-  height:25px;
-}
-
-.dropdown-select > option {
-  margin: 3px;
-  padding: 6px 8px;
-  text-shadow: none;
-  background: #f2f2f2;
-  border-radius: 3px;
-  cursor: pointer;
-
-}
-
-/* Fix for IE 8 putting the arrows behind the select element. */
-.lt-ie9 .dropdown {
-  z-index: 1;
-}
-
-.lt-ie9 .dropdown-select {
-  z-index: -1;
-}
-
-.lt-ie9 .dropdown-select:focus {
-  z-index: 3;
-}
-
-.dropdown-dark {
-  background: #636363; /* NEW2 */
-  background: #3e403f; /* NEW */
-  border-color: #111 #0a0a0a black;
-  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
-  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
-  color:#a6a6a6;
-  text-shadow:0px 1px rgba(0, 0, 0, 0.25);
-}
-
-.dropdown-dark:before {
-  border-bottom-color: #aaa;
-}
-
-.dropdown-dark:after {
-  border-top-color: #aaa;
-}
-
-.dropdown-dark .dropdown-select {
-  color: #a6a6a6;
-  text-shadow: 0 1px black;
-  width: calc(100% - 10px);
-  /* Fallback for IE 8 */
-  background: #444;
-}
-
-.dropdown-dark .dropdown-select:focus {
-  color: #fff;
-}
-
-.dropdown-dark .dropdown-select > option {
-  background: #56ab1a;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
-}
diff --git a/src/css/main.less b/src/css/main.less
index daf470328f..63677fea17 100644
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -18,8 +18,8 @@ body {
     height: 100%;
     font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
     font-size: 12px;
-    color: #303030;
-    background-color: #3d3f3e;
+    color: var(--text);
+    background-color: var(--surface-200);
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -30,7 +30,7 @@ body {
 }
 a {
     text-decoration: none;
-    color: var(--linkText);
+    color: var(--primary-500);
     font-weight: bold;
     &:hover {
         text-decoration: none;
@@ -42,9 +42,14 @@ a.disabled {
     color: #999;
 }
 .background_paper {
-    background-size: 100%;
-    background-image: url(../images/paper.png);
-    background-position: center;
+    background-color: var(--surface-200);
+    background-image:
+        linear-gradient(var(--surface-300) 2px, transparent 2px),
+        linear-gradient(90deg, var(--surface-300) 2px, transparent 2px),
+        linear-gradient(var(--surface-300) 1px, transparent 1px),
+        linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px);
+    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
+    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
 }
 .standard_input {
     padding-left: 3px;
@@ -54,8 +59,8 @@ a.disabled {
     border-radius: 3px;
     font-size: 12px;
     font-weight: normal;
-    border: 1px solid var(--subtleAccent);
-    background: var(--boxBackground);
+    border: 1px solid var(--surface-400);
+    background: var(--surface-200);
 }
 .helpicon {
     float: right;
@@ -79,36 +84,105 @@ a.disabled {
     a {
         padding: 1px 9px 1px 9px;
         margin-top: -45px;
-        background-color: var(--accent);
+        background-color: var(--primary-500);
         border-radius: 3px;
-        border: 1px solid #e8b423;
-        color: #000;
+        border: 1px solid var(--primary-600);
+        color: var(--text);
         float: right;
         font-weight: bold;
         font-size: 10px;
         line-height: 17px;
-        text-shadow: 0 1px rgba(255, 255, 255, 0.25);
         text-transform: uppercase;
         letter-spacing: 0.03em;
         display: block;
         &:hover {
-            background-color: #fecb3f;
+            background-color: var(--primary-400);
             transition: all ease 0.2s;
         }
     }
 }
+input, select, .select2-selection--single {
+    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important;
+    font-size: unset !important;
+    background-color: var(--surface-300) !important;
+    border: 1px solid var(--surface-500) !important;
+    color: var(--text);
+    padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
+    border-radius: 0.5rem !important;
+    min-width: 4rem;
+    display: inline-block;
+    box-sizing: border-box;
+    &.small {
+        padding: 0.15rem !important;
+        font-size: 12px !important;
+    }
+    &[type="text"] {
+        &[readonly] {
+            cursor: auto;
+        }
+    }
+    &[type="radio"] {
+        min-width: fit-content;
+    }
+    &:disabled {
+        background-color: var(--surface-400) !important;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+    &[type="range"], &[type="checkbox"] {
+        min-width: 0;
+        height: unset !important;
+    }
+}
+.ms-choice {
+    background-color: var(--surface-300) !important;
+    border: 1px solid var(--surface-500) !important;
+    color: var(--text) !important;
+    padding: 0.25rem !important;
+    padding-right: 0.5rem !important;
+    border-radius: 0.5rem !important;
+    min-width: 4rem !important;
+    font-weight: normal !important;
+}
+input {
+    cursor: text;
+}
+select, input[type="checkbox"] {
+    cursor: pointer;
+}
 input[type="number"] {
     &::-webkit-inner-spin-button {
         opacity: 1;
         margin-left: 5px;
     }
 }
+.select2-selection--single {
+    padding-left: 0.5rem !important;
+}
+
 .noarrows {
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
     }
 }
+.number {
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--surface-500);
+    width: 100%;
+    gap: 0.5rem;
+    display: flex;
+    align-items: center;
+    &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+        margin-bottom: 0;
+    }
+    .helpicon, label {
+        margin: 0 !important;
+    }
+}
 .clear-both {
     clear: both;
 }
@@ -125,20 +199,22 @@ input[type="number"] {
     margin-bottom: 20px;
 }
 .message-positive {
-    color: var(--accent) !important;
+    color: var(--primary-500) !important;
 }
 .message-negative {
-    color: var(--error) !important;
+    color: var(--error-400) !important;
     font-weight: bold !important;
 }
 .message-negative-italic {
-    color: var(--error) !important;
+    color: var(--error-400) !important;
     font-weight: bold !important;
     font-style: italic;
 }
 #main-wrapper {
-    padding: 0;
-    height: 100%;
+    height: 100vh;
+    background-color: var(--surface-100);
+    display: flex;
+    flex-direction: column;
 }
 #background {
     background: rgba(0, 0, 0, 0.5);
@@ -149,6 +225,7 @@ input[type="number"] {
     right: 0;
     bottom: 0;
     display: none;
+    backdrop-filter: blur(0.25rem);
 }
 #side_menu_swipe {
     display: none;
@@ -160,116 +237,68 @@ input[type="number"] {
     z-index: 1999;
 }
 .headerbar {
-    height: 115px;
-    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
+    height: 5rem;
     display: flex;
-    align-items: center;
-    padding: 0 15px;
-}
-#menu_btn {
-    display: none;
-    width: 24px;
-    height: 24px;
-    font-size: 20px;
-    color: #ffffff;
-    line-height: 24px;
-    text-align: center;
-    margin-right: 15px;
+    align-items: start;
+    padding: 1rem;
+    gap: 1rem;
+    background-color: var(--surface-200);
 }
-#reveal_btn {
+#menu_btn, #reveal_btn {
     display: none;
     width: 24px;
     height: 24px;
     font-size: 20px;
-    color: #ffffff;
+    color: var(--surface-700);
     line-height: 24px;
     text-align: center;
-    margin-left: 15px;
+    cursor: pointer;
+    &:hover {
+        color: var(--surface-800);
+    }
 }
 #port-picker {
     display: flex;
     align-items: center;
     margin-left: auto;
     .auto_connect {
-        color: var(--subtleAccent);
+        color: var(--surface-950);
     }
 }
 #portsinput {
-    width: 220px;
-    margin-right: 15px;
-    .dropdown {
-        margin-bottom: 5px;
-    }
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 0.5rem;
 }
 #auto-connect-and-baud {
-    float: right;
-}
-#auto-connect-switch {
-    width: 110px;
-    float: left;
-    margin-top: 4px;
-    margin-left: 5px;
-    margin-right: 20px;
-}
-#baudselect {
-    width: 80px;
-    float: right;
-    margin-right: 2px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 .gray {
-    color: var(--subtleAccent);
+    color: var(--surface-500);
 }
 #firmware-virtual-option {
-    height: 76px;
-    width: 180px;
-    margin-right: 15px;
-    margin-top: 16px;
+    width: fit-content;
     display: none;
 }
-#port-override-option {
-    height: 76px;
-    margin-top: 24px;
-    margin-right: 15px;
-    label {
-        background-color: #2b2b2b;
-        border-radius: 3px;
-        padding: 3px;
-        color: var(--subtleAccent);
-    }
-}
-#port-override {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: #888888;
-    width: 140px;
-    margin-left: 2px;
-    padding: 1px;
-    border-radius: 3px;
-    height: 15px;
-    font-size: 12px;
-}
 #header_btns {
     display: flex;
     align-items: center;
+    gap: 2rem;
 }
-.open_firmware_flasher {
-    position: relative;
-    width: 80px;
-    text-align: center;
-    height: 84px;
-}
-.connect_controls {
-    position: relative;
-    width: 80px;
-    text-align: center;
-    height: 84px;
+.open_firmware_flasher, .connect_controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 .firmware_b {
     width: 52px;
-    margin: 0 14px;
     height: 52px;
     a.flash {
-        background-color: var(--accent);
-        border: 1px solid #dba718;
+        background-color: var(--primary-500);
+        border: 1px solid var(--primary-600);
         background-repeat: no-repeat;
         height: 50px;
         width: 50px;
@@ -281,31 +310,30 @@ input[type="number"] {
         background-size: 30px;
         background-position: center 10px;
         &:hover {
-            background-color: #ffcc3f;
+            background-color: var(--primary-400);
         }
     }
     a.flash.disabled {
-        background-color: #808080;
+        background-color: var(--surface-500);
         pointer-events: none;
         cursor: default;
     }
     a.flash.active {
-        background-color: #e60000;
-        border: 1px solid #fe0000;
+        background-color: var(--error-500);
+        border: 1px solid var(--error-600);
         transition: none;
         background-image: url(../images/icons/cf_icon_flasher_white.svg);
         &:hover {
-            background-color: #f21212;
+            background-color: var(--error-400);
         }
     }
 }
 .connect_b {
     width: 52px;
-    margin: 0 14px;
     height: 52px;
     a.connect {
-        background-color: var(--accent);
-        border: 1px solid #dba718;
+        background-color: var(--primary-500);
+        border: 1px solid var(--primary-600);
         background-repeat: no-repeat;
         height: 50px;
         width: 50px;
@@ -317,246 +345,137 @@ input[type="number"] {
         background-size: 44px;
         background-position: center 6px;
         &:hover {
-            background-color: #ffcc3f;
+            background-color: var(--primary-400);
         }
     }
     a.connect.disabled {
-        background-color: #808080;
+        background-color: var(--surface-500);
         pointer-events: none;
         cursor: default;
     }
     a.connect.active {
-        background-color: #e60000;
-        border: 1px solid #fe0000;
+        background-color: var(--error-500);
+        border: 1px solid var(--error-600);
         transition: none;
         background-image: url(../images/icons/cf_icon_usb1_white.svg);
         &:hover {
-            background-color: #f21212;
+            background-color: var(--error-400);
         }
     }
 }
 .flash_state {
-    color: #fff;
-    font-size: 12px;
-    font-weight: normal;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
-    padding: 0 10px;
-}
-.connect_state {
-    color: #fff;
-    font-size: 12px;
-    font-weight: normal;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
-    padding: 0 10px;
+    white-space: nowrap;
 }
 .header-wrapper {
     display: flex;
+    gap: 1rem;
+    justify-content: space-between;
     .mode-connected {
         display: none;
     }
 }
 #sensor-status {
-    margin-right: 10px;
-    line-height: 2px;
-    height: 67px;
-    border-radius: 5px;
-    border: 1px solid #272727;
-    box-shadow: 0 2px 0 rgba(92, 92, 92, 0.5);
-    background-color: #434343;
-    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
+    border-radius: 0.5rem;
+    background-color: var(--surface-300);
     >ul {
         display: flex;
     }
     li {
-        float: left;
-        height: 67px;
-        width: 33px;
-        line-height: 18px;
-        text-align: center;
-        border-top: 1px solid #373737;
-        border-bottom: 1px solid #1a1a1a;
-        border-left: 1px solid #373737;
-        border-right: 1px solid #222222;
-        background-color: #434343;
-        background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
-        padding-left: 5px;
-        padding-right: 5px;
-        text-shadow: 0 1px rgba(0, 0, 0, 1.0);
-        &:last-child {
-            border-right: 0 solid #c0c0c0;
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-        }
-        &:first-child {
-            border-left: 0 solid #c0c0c0;
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-        }
-    }
-    div {
-        white-space: nowrap;
-        overflow: hidden;
-    }
-    .on {
-        background-color: #434343;
-        background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
+        width: 3.5rem;
+        display: flex;
     }
 }
 .gyroicon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_gyro_off.png);
-    background-size: 43px;
-    background-position: top;
 }
 .accicon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_acc_off.png);
-    background-size: 40px;
-    background-position: -5px 2px;
 }
 .magicon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_mag_off.png);
-    background-size: 42px;
-    background-position: -5px 2px;
 }
 .gpsicon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_sat_off.png);
-    background-size: 42px;
-    background-position: -5px 2px;
 }
 .baroicon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_baro_off.png);
-    background-size: 40px;
-    background-position: -5px 2px;
+
 }
 .sonaricon {
-    background-repeat: no-repeat;
-    height: 30px;
-    margin-top: 3px;
-    width: 100%;
-    padding-top: 40px;
-    color: #4f4f4f;
-    text-align: center;
     background-image: url(../images/icons/sensor_sonar_off.png);
-    background-size: 41px;
-    background-position: -4px 1px;
 }
 .gyroicon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_gyro_on.png);
 }
 .accicon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_acc_on.png);
 }
 .magicon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_mag_on.png);
 }
 .gpsicon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_sat_on_no_fix.png);
 }
 .gpsicon.active_fix {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_sat_on_with_fix.png);
 }
 .baroicon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_baro_on.png);
 }
 .sonaricon.active {
-    color: #818181;
+    color: var(--text);
     background-image: url(../images/icons/sensor_sonar_on.png);
 }
+.gyroicon, .accicon, .magicon, .gpsicon, .baroicon, .sonaricon {
+    background-repeat: no-repeat;
+    height: 30px;
+    // margin-top: 3px;
+    width: 100%;
+    padding-top: 3rem;
+    color: var(--surface-700);
+    text-align: center;
+    background-size: 41px;
+    background-position-x: center;
+    background-position-y: 4px;
+}
 #dataflash_wrapper_global {
-    color: white;
-    font-size: 10px;
-    width: 125px;
-    margin-right: 5px;
-    line-height: 12px;
-    height: 33px;
-    border-radius: 5px;
-    border: 1px solid #272727;
-    box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5);
-    background-color: #434343;
-    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
-    padding-top: 5px;
+    color: var(--text);
+    // width: 8rem;
+    height: fit-content;
     display: none;
-    text-shadow: 0 1px rgba(0, 0, 0, 1.0);
 }
 .dataflash-contents_global {
-    margin-top: 18px;
-    border: 1px solid #4A4A4A;
-    background-color: #4A4A4A;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    border-radius: 3px;
-    margin-left: 5px;
-    margin-right: 5px;
-    .notsupported_global {
-        display: none;
-    }
+    display: flex !important;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--surface-300);
+    border-radius: 0.5rem;
     li {
-        height: 5px;
+        background-color: var(--surface-600);
+        height: 0.35rem;
         position: relative;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
-        border-radius: 2px;
-        div {
-            position: absolute;
-            top: -18px;
-            margin-top: 0;
-            left: 0;
-            right: 0;
-            width: 120px;
-            text-align: left;
-            color: silver;
-        }
+        border-radius: 999px;
+        width: 100% !important;
+    }
+    .notsupported_global {
+        display: none;
     }
     progress {
         &::-webkit-progress-bar {
             height: 8px;
-            background-color: #eee;
+            background-color: var(--surface-300);
         }
     }
 }
 .dataflash-free_global {
-    background-color: var(--accent);
+    background-color: var(--primary-500);
     border-radius: 4px;
 }
 .dataflash-contents {
@@ -570,32 +489,27 @@ input[type="number"] {
     display: none;
     color: #868686;
     text-align: center;
-    text-shadow: 0 1px rgba(0, 0, 0, 1.0);
     margin-top: 2px;
 }
 #expertMode {
-    color: var(--subtleAccent);
-    margin-top: 27px;
-    width: 125px;
-    float: right;
-    margin-right: 0;
-    line-height: 12px;
+    color: var(--surface-800);
+    width: 100%;
+    margin-top: 1rem;
+    label {
+        display: flex;
+        align-items: baseline;
+        .expertModeText {
+            white-space: nowrap;
+        }
+    }
 }
 #quad-status_wrapper {
     display: none;
-    color: white;
     font-size: 10px;
-    min-width: 90px;
-    margin-right: 10px;
-    line-height: 12px;
-    height: 67px;
-    border-radius: 5px;
-    border: 1px solid #272727;
-    box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5);
-    background-color: #434343;
-    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
-    text-shadow: 0 1px rgba(0, 0, 0, 1.0);
+    border-radius: 0.5rem;
+    background-color: var(--surface-300);
     white-space: nowrap;
+    padding: 0.25rem 0.5rem;
 }
 
 .armedicon {
@@ -644,14 +558,20 @@ input[type="number"] {
     background-image: url(../images/icons/cf_icon_link_active.svg);
 }
 #log {
-    background-color: #242424;
-    color: rgba(255, 255, 255, 0.60);
+    background-color: var(--surface-200);
+    color: var(--text);
     line-height: 21px;
-    height: 27px;
+    height: 2rem;
     overflow-y: hidden;
     transition: all 0.2s;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    overflow: hidden;
+    padding: 0.5rem;
+    padding-top: 0;
+    padding-bottom: 0;
     .wrapper {
-        padding: 5px 5px 4px 10px;
+        padding: 0.5rem;
         position: relative;
         bottom: 0;
         >* {
@@ -663,7 +583,7 @@ input[type="number"] {
     }
     a {
         font-weight: normal;
-        color: #ffbb00;
+        color: var(--primary-500);
         &:hover {
             text-decoration: underline;
         }
@@ -671,7 +591,7 @@ input[type="number"] {
 }
 #log.active {
     overflow-y: auto;
-    box-shadow: inset 0 0 15px #000000;
+    box-shadow: inset 0 0 15px var(--surface-500);
     height: 111px;
 }
 #scrollicon {
@@ -698,44 +618,49 @@ input[type="number"] {
     padding: 2px;
     z-index: 10;
     a {
-        color: #656565 !important;
+        color: var(--surface-700) !important;
         transition: all 0.2s;
         &:hover {
-            color: #959595 !important;
+            color: var(--surface-900) !important;
             text-decoration: none !important;
         }
     }
 }
 #tab-content-container {
     display: flex;
-    height: calc(100% - 162px);
-    align-items: stretch;
+    flex: 1;
+    height: 100%;
+    overflow-y: hidden;
     transition: all 0.2s;
 }
 #tab-content-container.logopen {
-    height: calc(100% - 247px);
+    height: 100%;
 }
 .tab_container {
     transition: all 0.2s;
-    width: 200px;
-    border-right: 4px solid var(--accent);
-    background-color: #2e2e2e;
+    width: 13rem;
     overflow: auto;
+    padding: 1rem;
+    padding-right: 0.5rem;
+    background-color: var(--surface-100);
 }
 #content {
     transition: all 0.2s;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: white;
+    background-color: var(--surface-100);
     -webkit-transform: rotateX(0deg);
-    width: calc(100% - 202px);
+    width: 100%;
 }
 .tab_container.logopen {
     overflow-x: hidden;
     overflow-y: auto;
 }
 #tabs {
+    background-color: var(--surface-200);
+    border-radius: 1rem;
     font-size: 13px;
+    padding: 0.5rem;
     ul.mode-connected {
         display: none;
     }
@@ -743,7 +668,6 @@ input[type="number"] {
         display: none;
     }
     li {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.30);
         &:first-child {
             border-top: 0;
         }
@@ -752,22 +676,23 @@ input[type="number"] {
         }
         a {
             font-weight: normal;
-            padding-left: 33px;
-            padding-top: 5px;
-            padding-bottom: 3px;
+            padding-top: 0.25rem;
+            padding-bottom: 0.25rem;
+            padding-left: 2rem;
             background-color: transparent;
-            color: #999999;
-            height: 23px;
-            display: block;
-            text-shadow: 0 1px rgba(0, 0, 0, 0.45);
+            color: var(--text);
+            border-radius: 999px;
+            height: 1.5rem;
+            display: flex;
+            align-items: center;
             transition: none;
-            border-top: solid 1px rgba(255, 255, 255, 0.05);
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
+            margin-bottom: 0.25rem;
             &:hover {
                 text-decoration: none;
-                background-color: rgba(128, 128, 128, 0.50);
+                background-color: var(--primary-transparent-1);
                 color: #fff;
             }
         }
@@ -776,13 +701,12 @@ input[type="number"] {
         color: #fff;
         transition: none;
         a {
-            background-color: var(--accent);
-            color: #000;
+            background-color: var(--primary-transparent-2);
+            color: var(--primary-500);
             transition: none;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.45);
             &:hover {
                 cursor: default;
-                background-color: var(--accent);
+                background-color: var(--primary-transparent-2);
             }
         }
     }
@@ -1057,54 +981,56 @@ li.active {
     }
 }
 dialog {
-    background-color: white;
-    padding: 1em;
+    background-color: var(--surface-200);
+    color: var(--text);
+    padding: 1rem;
     height: fit-content;
     margin: auto auto;
     position: absolute;
     width: 50%;
-    border-radius: 3px;
-    border: 1px solid silver;
+    border-radius: 0.75rem;
+    border: 2px solid var(--surface-500);
     .dialog_toolbar {
         .btn {
             a {
                 margin-top: 0;
                 margin-bottom: 0;
                 margin-right: 20px;
-                background-color: var(--accent);
+                background-color: var(--primary-500);
                 border-radius: 3px;
-                border: 1px solid #dba718;
+                border: 1px solid var(--primary-600);
                 color: #000;
                 float: left;
                 font-weight: bold;
                 font-size: 12px;
-                text-shadow: 0 1px rgba(255, 255, 255, 0.25);
                 display: block;
                 cursor: pointer;
                 transition: all ease 0.2s;
                 padding: 0 9px;
                 line-height: 28px;
                 &:hover {
-                    background-color: var(--hoverButton-background);
+                    background-color: var(--primary-400);
                     transition: all ease 0.2s;
                 }
                 &:active {
-                    background-color: var(--accent);
+                    background-color: var(--primary-500);
                     transition: all ease 0.0s;
                     box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
                 }
             }
             a.disabled {
                 cursor: default;
-                color: #fff;
-                background-color: #AFAFAF;
-                border: 1px solid #AFAFAF;
+                color: var(--surface-900);
+                background-color: var(--surface-500);
+                border: 1px solid var(--surface-500);
                 pointer-events: none;
-                text-shadow: none;
-                opacity: 0.5;
+                opacity: 1;
             }
         }
     }
+    &::backdrop {
+        backdrop-filter: blur(0.5rem);
+    }
 }
 .dialogYesNo {
     .dialogYesNoContent {
@@ -1154,12 +1080,11 @@ dialog {
     max-width: 400px;
 }
 .tab_title {
-    border-bottom: 1px solid var(--accent);
-    font-size: 20px;
-    line-height: 24px;
-    height: 30px;
+    border-bottom: 2px solid var(--primary-500);
+    font-size: 2rem;
     font-weight: 300;
-    margin-bottom: 15px;
+    margin-bottom: 1rem;
+    padding-bottom: 0.25rem;
 }
 .tab_sponsor {
     min-height: 60px;
@@ -1172,67 +1097,109 @@ dialog {
     height: 45px;
 }
 .note {
-    background-color: #fff7cd;
-    border: 1px solid #ffe55f;
-    margin-bottom: 10px;
-    margin-top: 0;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: normal;
-    padding: 5px 7px 5px 7px;
+    background-color: var(--primary-transparent-2);
+    border: 1px solid var(--primary-500);
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+}
+.danger {
+    background-color: var(--error-transparent-1);
+    border: 1px solid var(--error-600);
+    color: #fff;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+
 }
 .tab_wrapper {
     padding: 20px 15px 15px 15px;
 }
 .content_wrapper {
-    padding: 20px 20px 20px 19px;
+    padding: 1.25rem;
+    height: 100%;
     position: relative;
+    >.note {
+        margin-bottom: 1rem;
+    }
 }
 .content_toolbar {
-    width: 100%;
-    height: 30px;
-    background-color: #EFEFEF;
-    box-shadow: rgba(0, 0, 0, 0.10) 0 -3px 8px;
-    padding: 10px 0;
-    overflow: hidden;
-    border-top: 1px solid var(--subtleAccent);
+    width: fit-content;
+    background-color: var(--surface-300);
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -0.5rem 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 0.75rem 1rem;
+    border-top-left-radius: 1.5rem;
+    &::before {
+        width: 1.5rem;
+        aspect-ratio: 1;
+        content: '';
+        mask: url(../images/corner.svg);
+        background-color: var(--surface-300);
+        position: absolute;
+        left: -1.5rem;
+        bottom: 0;
+    }
+    .info {
+        flex: 100;
+        position: relative;
+        .progress {
+            width: 100%;
+            height: 30px;
+            border-radius: 0.25rem;
+            overflow: hidden;
+            &::-webkit-progress-bar {
+                background-color: var(--surface-400);
+            }
+        }
+        .progressLabel {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 0.75rem;
+            line-height: 1.75rem;
+        }
+    }
     .btn {
         a {
             margin-top: 0;
             margin-bottom: 0;
-            margin-right: 20px;
-            background-color: var(--accent);
+            background-color: var(--primary-500);
             border-radius: 3px;
-            border: 1px solid #dba718;
+            border: 1px solid var(--primary-600);
             color: #000;
             float: right;
             font-weight: bold;
             font-size: 12px;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
             display: block;
             cursor: pointer;
             transition: all ease 0.2s;
-            padding: 0 9px;
+            padding: 0 0.5rem;
             line-height: 28px;
             user-select: none;
+            white-space: nowrap;
             &:hover {
-                background-color: var(--hoverButton-background);
+                background-color: var(--primary-400);
                 transition: all ease 0.2s;
             }
             &:active {
-                background-color: var(--accent);
+                background-color: var(--primary-500);
                 transition: all ease 0.0s;
                 box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
             }
         }
         a.disabled {
             cursor: default;
-            color: #fff;
-            background-color: #AFAFAF;
-            border: 1px solid #AFAFAF;
+            color: var(--surface-900);
+            background-color: var(--surface-500);
+            border: 1px solid var(--surface-500);
             pointer-events: none;
-            text-shadow: none;
-            opacity: 0.5;
+            opacity: 1;
         }
     }
 }
@@ -1244,23 +1211,13 @@ dialog {
 }
 
 .toolbar_fixed_bottom {
-    .content_wrapper {
-        height: calc(100% - 90px);
-        overflow-y: auto;
-        position: initial;
-    }
-    .content_toolbar {
+    &.content_toolbar {
         display: flex;
         flex-wrap: wrap;
-        position: absolute;
+        position: sticky;
         bottom: 0;
-        left: 0;
+        left: 100%;
         z-index: 2000;
-        div {
-            &:first-child {
-                margin-left: auto;
-            }
-        }
         div[style='display: none;'] {
             &:first-child {
                 visibility: hidden;
@@ -1268,21 +1225,12 @@ dialog {
             }
         }
     }
-    .content_toolbar.xs-compressed {
-        flex-direction: row-reverse;
-        div {
-            &:first-child {
-                margin-left: 0;
-            }
-            &:last-child {
-                margin-left: auto;
-            }
-        }
-    }
+}
+.content_toolbar.xs-compressed {
+    max-width: 75%;
 }
 .toolbar_expand_btn {
     display: none;
-    position: absolute;
     bottom: 15px;
     left: 15px;
     width: 20px;
@@ -1333,10 +1281,7 @@ dialog {
     width: 67%;
 }
 .spacer {
-    padding-left: 7px;
-    padding-right: 7px;
-    width: calc(100% - 14px);
-    float: left;
+    width: 100%;
 }
 .spacer_left {
     padding-left: 15px;
@@ -1349,67 +1294,82 @@ dialog {
     float: left;
 }
 .gui_box {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-color: #FFFFFF;
-    float: left;
-    width: calc(100% - 2px);
-    margin-bottom: 10px;
-}
-.gui_warning {
-    background: #ffdddd;
-    .gui_box_titlebar {
-        background-color: #dc0000;
-        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent);
-        color: white;
-    }
-}
-.gui_note {
-    background: #fff6de;
-    .gui_box_titlebar {
-        background-color: var(--accent);
-        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent);
-        color: white;
-    }
-}
-.grey {
-    background-color: #f9f9f9;
+    border: 2px solid var(--surface-400);
+    border-radius: 0.75rem;
+    background-color: var(--surface-100);
+    height: fit-content;
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    padding-top: 1.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 .gui_box_titlebar {
-    background-color: var(--quietHeader);
-    color: var(--quietText);
-    border-radius: 3px 3px 0 0;
+    color: var(--surface-100);
+    background-color: var(--primary-500);
+    position: absolute;
     font-size: 13px;
-    width: 100%;
-    height: 27px;
-    padding-bottom: 0;
-    float: left;
-    margin-bottom: 7px;
+    height: 1.75rem;
+    top: calc(1.75rem / -2);
+    left: 1rem;
+    padding: 0 0.75rem;
     font-weight: 600;
+    display: flex;
+    gap: 0.5rem;
+    white-space: nowrap;
+    align-items: center;
+    overflow-x: hidden;
+    border-radius: 999px;
     .switchery {
         margin-top: -3px;
     }
+    .helpicon {
+        margin-top: 0px;
+    }
 }
 .gui_box_bottombar {
-    background-color: #e4e4e4;
+    background-color: var(--surface-400);
+    color: var(--text);
     border-radius: 0 0 3px 3px;
     font-size: 13px;
     width: 100%;
     height: 27px;
     padding-top: 0;
-    float: left;
     font-weight: 600;
 }
-.spacer_box {
-    padding: 10px;
-    margin-bottom: 3px;
+.gui_warning {
+    background: var(--error-transparent-1);
+    border: 1px solid var(--error-500);
+    .gui_box_titlebar {
+        background-color: #dc0000;
+        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent);
+        color: var(--text);
+    }
 }
-.spacer_box_title {
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 4px;
-    margin-bottom: 0;
-    float: left;
+.gui_note {
+    background: var(--primary-transparent-1);
+    border: 1px solid var(--primary-500);
+    .gui_box_titlebar {
+        background-color: var(--primary-500);
+        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .4) 100%, transparent);
+        color: black;
+    }
+}
+.grey {
+    background-color: var(--surface-200);
+}
+.spacer_box {
+    height: fit-content;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    .select {
+        display: flex;
+        gap: 1rem;
+    }
 }
 .fixed_band {
     position: relative;
@@ -1425,21 +1385,20 @@ dialog {
             margin-top: 9px;
             margin-bottom: 0;
             margin-right: 20px;
-            background-color: var(--accent);
+            background-color: var(--primary-500);
             border-radius: 3px;
-            border: 1px solid #dba718;
+            border: 1px solid var(--primary-600);
             color: #000;
             float: right;
             font-weight: bold;
             font-size: 12px;
-            text-shadow: 0 1px rgba(0, 0, 0, 0.25);
             display: block;
             cursor: pointer;
             transition: all ease 0.2s;
             padding: 0 9px;
             line-height: 28px;
             &:hover {
-                background-color: var(--hoverButton-background);
+                background-color: var(--primary-400);
                 transition: all ease 0.2s;
             }
         }
@@ -1452,11 +1411,11 @@ dialog {
     margin-top: 0;
     float: left;
     a {
-        padding: 5px 0 5px 0;
+        padding: 0.35rem 0 0.35rem 0;
         text-align: center;
-        background-color: var(--accent);
-        border-radius: 4px;
-        border: 1px solid #dba718;
+        background-color: var(--primary-500);
+        border-radius: 0.5rem;
+        border: 1px solid var(--primary-600);
         color: #000;
         font-weight: 600;
         font-size: 12px;
@@ -1466,22 +1425,21 @@ dialog {
         text-decoration: none;
         cursor: pointer;
         &:hover {
-            background-color: var(--hoverButton-background);
+            background-color: var(--primary-400);
             color: #000;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
             transition: all ease 0.2s;
             text-decoration: none;
         }
         &:active {
-            background-color: var(--hoverButton-background);
+            background-color: var(--primary-400);
             transition: all ease 0.0s;
             box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
         }
     }
     a.disabled {
-        background-color: #f1f1f1;
-        border: 1px solid var(--subtleAccent);
-        color: #ccc;
+        background-color: var(--surface-500);
+        border: 1px solid var(--surface-400);
+        color: var(--surface-900);
     }
 }
 .margin-top5 {
@@ -1492,13 +1450,12 @@ dialog {
     margin-top: 8px;
     margin-bottom: 8px;
     margin-right: 10px;
-    background-color: var(--accent);
+    background-color: var(--primary-500);
     border-radius: 3px;
-    border: 1px solid #dba718;
+    border: 1px solid var(--primary-600);
     color: #000;
     font-weight: bold;
     font-size: 12px;
-    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
     display: inline-block;
     cursor: pointer;
     transition: all ease 0.2s;
@@ -1506,11 +1463,11 @@ dialog {
     line-height: 28px;
     user-select: none;
     &:hover {
-        background-color: var(--hoverButton-background);
+        background-color: var(--primary-400);
     }
 }
 .regular-button.pushed {
-    background-color: var(--pushedButton-background);
+    background-color: var(--primary-400);
     color: var(--pushedButton-fontColor);
     border-radius: 3px;
 }
@@ -1519,13 +1476,12 @@ dialog {
     margin-top: 8px;
     margin-bottom: 8px;
     margin-right: 10px;
-    background-color: #e60000;
+    background-color: var(--error-500);
     border-radius: 3px;
-    border: 1px solid #fe0000;
+    border: 1px solid var(--error-600);
     color: #fff;
     font-weight: bold;
     font-size: 12px;
-    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
     display: inline-block;
     cursor: pointer;
     transition: all ease 0.2s;
@@ -1533,28 +1489,23 @@ dialog {
     line-height: 28px;
     user-select: none;
     &:hover {
-        background-color: #f21212;
+        background-color: var(--error-400);
     }
 }
 .danger-button.pushed {
-    background-color: #ff1b1b;
+    background-color: var(--error-400);
     color: #fff;
     border-radius: 3px;
 }
 .small {
     width: auto;
     position: relative;
-    margin-bottom: 7px;
-    margin-top: 0;
-    margin-right: 5px;
-    float: left;
     a {
         padding: 3px 4px 4px 4px;
         text-align: center;
-        text-shadow: 0 1px rgba(0, 0, 0, 0.25);
-        background-color: #acacac;
+        background-color: var(--surface-500);
         border-radius: 3px;
-        border: 1px solid #949494;
+        color: var(--surface-900);
         color: #fff;
         font-weight: 600;
         font-size: 11px;
@@ -1562,14 +1513,13 @@ dialog {
         display: block;
         transition: all ease 0.2s;
         &:hover {
-            background-color: var(--accent);
+            background-color: var(--primary-600);
             color: #000;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-            border: 1px solid var(--accent);
+            border: 1px solid var(--primary-500);
             transition: all ease 0.2s;
         }
         &:active {
-            background-color: #878787;
+            background-color: var(--primary-600);
             transition: all ease 0.0s;
             box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
         }
@@ -1577,40 +1527,21 @@ dialog {
 }
 .green {
     a {
-        background-color: var(--accent);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+        background-color: var(--primary-500);
         color: #000;
-        border: 1px solid #dba718;
+        border: 1px solid var(--primary-600);
         transition: all ease 0.2s;
         &:hover {
-            background-color: #ffcc3f;
-            border: 1px solid #dba718;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+            background-color: var(--primary-400);
+            border: 1px solid var(--primary-600);
             color: #000;
             transition: all ease 0.2s;
         }
     }
 }
-.cf_table {
-    margin-bottom: 5px;
-    float: left;
-    margin-top: -5px;
-    font-size: 11px;
+table {
     width: 100%;
-    td {
-        border: 0;
-        padding-top: 2px;
-        padding-bottom: 5px;
-        &:last-child {
-            text-align: right;
-        }
-    }
     tr {
-        &:not(:last-child) {
-            td {
-                border-bottom: dotted 1px var(--subtleAccent);
-            }
-        }
         &:last-child {
             td {
                 border: none;
@@ -1622,7 +1553,7 @@ dialog {
     width: 33%;
 }
 .gps_false {
-    background-color: #FF0004;
+    background-color: var(--error-500);
     padding: 1px 7px 2px 7px;
     border-radius: 3px;
     color: #FFFFFF;
@@ -1630,7 +1561,7 @@ dialog {
     margin-left: 3px;
 }
 .gps_true {
-    background-color: var(--accent);
+    background-color: var(--primary-500);
     padding: 1px 7px 2px 7px;
     border-radius: 3px;
     color: #FFFFFF;
@@ -1638,43 +1569,43 @@ dialog {
     margin-left: 3px;
 }
 .tab-setup {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-landing {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-adjustments {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-auxiliary {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-cli {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-configuration {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-failsafe {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-firmware_flasher {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-gps {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-help {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-led-strip {
@@ -1682,45 +1613,49 @@ dialog {
     position: relative;
 }
 .tab-logging {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-modes {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-motors {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-pid_tuning {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-ports {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-receiver {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-sensors {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-servos {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-osd {
-    height: 100%;
+    height: fit-content;
     position: relative;
 }
 .tab-power {
     height: 100%;
     position: relative;
 }
+.tab-vtx {
+    height: 100%;
+    position: relative;
+}
 .properties {
     width: 800px;
     dl {
@@ -1732,22 +1667,22 @@ dialog {
     }
 }
 .colorToggle {
-    background-color: #ff0000;
+    background-color: var(--error-500);
     padding: 2px 5px;
     border-radius: 3px;
     color: #fff;
     font-size: 10px;
     &.low {
-        background-color: #808080;
+        background-color: var(--surface-500);
     }
     &.notReady {
-        background-color: #ffcc3f;
+        background-color: var(--primary-400);
     }
     &.locked {
-        background-color: #ff9500;
+        background-color: var(--warning-500);
     }
     &.ready {
-        background-color: #008000;
+        background-color: var(--success-500);
     }
 }
 .buildInfoBtn {
@@ -1757,9 +1692,9 @@ dialog {
     a {
         padding: 2px 5px 2px 5px;
         text-align: center;
-        background-color: var(--accent);
+        background-color: var(--primary-500);
         border-radius: 4px;
-        border: 1px solid #dba718;
+        border: 1px solid var(--primary-600);
         color: #000;
         font-weight: 600;
         font-size: 10px;
@@ -1769,22 +1704,21 @@ dialog {
         text-decoration: none;
         cursor: pointer;
         &:hover {
-            background-color: var(--hoverButton-background);
+            background-color: var(--primary-400);
             color: #000;
-            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
             transition: all ease 0.2s;
             text-decoration: none;
         }
         &:active {
-            background-color: var(--hoverButton-background);
+            background-color: var(--primary-400);
             transition: all ease 0.0s;
             box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
         }
     }
     a.disabled {
-        background-color: #f1f1f1;
-        border: 1px solid var(--subtleAccent);
-        color: #ccc;
+        background-color: var(--surface-500);
+        border: 1px solid var(--surface-400);
+        color: var(--surface-900);
     }
 }
 .buildInfoClassOptions {
@@ -1803,7 +1737,7 @@ dialog {
 .bottomStatusIcons {
     display: flex;
     justify-content: space-between;
-    background-color: #272727;
+    background-color: var(--surface-300);
     height: 31px;
     margin-top: 2px;
     border-bottom-left-radius: 5px;
@@ -1814,14 +1748,14 @@ button {
     border-radius: 4px;
     background-color: #ccc;
     color: #666;
-    border: 1px solid var(--subtleAccent);
+    border: 1px solid var(--surface-400);
     font-weight: 600;
     font-size: 10pt;
     cursor: pointer;
 }
 button.active {
-    background-color: var(--accent);
-    border: 1px solid #dba718;
+    background-color: var(--primary-500);
+    border: 1px solid var(--primary-600);
     color: #000;
 }
 .jBox-Tooltip {
@@ -1834,22 +1768,21 @@ button.active {
     display: none;
 }
 .darkgrey_box {
-    background-color: #575757;
+    background-color: var(--surface-500);
     color: white;
 }
 .topBorderLine {
-    border-top: 1px solid var(--subtleAccent);
+    border-top: 1px solid var(--surface-400);
     padding-top: 5px;
 }
 .jBox-container {
-    background: #fff;
-    border: 1px solid var(--accent);
-    font-size: 11px;
-    line-height: 13px;
-    color: #525352;
+    background: var(--surface-400);
+    border: 2px solid var(--primary-500);
+    color: var(--text);
+    border-radius: 0.5rem !important;
 }
 .jBox-content {
-    padding: 4px 5px;
+    padding: 0.5rem;
 }
 .jBox-Modal {
     .jBox-content {
@@ -1876,7 +1809,8 @@ button.active {
     &:after {
         width: 10px;
         height: 9px;
-        border: 1px solid var(--accent);
+        border: 2px solid var(--primary-500);
+        background-color: var(--primary-500);
     }
 }
 #dialogResetToCustomDefaults-content {
@@ -1896,28 +1830,38 @@ button.active {
     margin-bottom: 10px;
 }
 .noUi-target {
-    background: var(--alternativeBackground);
-    border-color: var(--subtleAccent);
+    background: var(--surface-300);
+    border-color: var(--surface-400);
     box-shadow: none;
+    border-radius: 0.5rem !important;
+    height: 1.5rem;
 }
 .noUi-handle {
-    background: var(--sideBackground);
-    border-color: var(--subtleAccent);
+    background: var(--surface-400);
+    border-color: var(--surface-400);
     box-shadow: none;
     &:before {
-        background-color: var(--subtleAccent);
+        background-color: var(--surface-600);
+        top: 0.55rem;
     }
     &:after {
-        background-color: var(--subtleAccent);
+        background-color: var(--surface-600);
+        top: 0.55rem;
     }
+    height: 2.2rem !important;
+    cursor: pointer;
 }
 .noUi-background {
-    background: var(--alternativeBackground);
+    background: var(--surface-300);
     box-shadow: none;
 }
 .noUi-connect {
     box-shadow: none;
 }
+.noUi-pips-horizontal {
+    padding: 1rem 0 !important;
+    height: 4rem;
+}
 .grid-row {
     width: 100%;
     display: flex;
@@ -2043,287 +1987,87 @@ button.active {
         width: calc(100% - 7px);
     }
 }
-@media all and (max-width: 575px) {
-    #side_menu_swipe {
-        display: block;
-    }
-    .visible-on-desktop-only {
-        display: none !important;
-    }
-    .headerbar {
-        height: fit-content;
-        background: rgba(0, 0, 0, 0.15);
-        flex-wrap: wrap;
-        align-content: flex-start;
-        padding-top: 6px;
-        box-sizing: border-box;
-        transition: all 0.2s;
-    }
-    .headerbar.expand {
-        height: 154px;
-    }
-    .headerbar.expand2 {
-        height: 118px;
-    }
-    #menu_btn {
-        display: block;
-        order: 1;
-    }
-    #reveal_btn {
-        display: block;
-        order: 4;
-    }
-    #header_btns {
-        margin-left: auto;
-        order: 3;
-    }
-    .open_firmware_flasher {
-        width: 31px;
-        height: 31px;
-        margin-left: 15px;
-    }
-    .connect_controls {
-        width: 31px;
-        height: 31px;
-        margin-left: 15px;
-    }
-    .firmware_b {
-        margin: 0;
-        zoom: 0.6;
-    }
-    .connect_b {
-        margin: 0;
-        zoom: 0.6;
-    }
-    .web-port-picker {
-        order: 5;
-        padding-top: 5px;
-    }
-    #port-picker {
-        display: none !important;
-        order: 5;
-        justify-content: space-between;
-        margin-top: 15px;
-        transition: all 0.2s;
-    }
-    .header-wrapper {
-        display: none !important;
-        order: 5;
-        zoom: 62%;
-        justify-content: space-around;
-    }
-    .flash_state {
-        display: none !important;
-    }
-    .connect_state {
-        display: none !important;
-    }
-    #port-picker.reveal {
-        display: flex !important;
-        width: 100%;
-        margin-left: 0;
-    }
-    #port-override-option {
-        flex-grow: 1;
-    }
-    #portsinput {
-        display: flex;
-        gap: 5px;
-        flex-grow: 1;
-        margin-right: 0;
-    }
-    #port-override {
-        width: calc(100% - 40px);
-    }
-    .header-wrapper.reveal {
-        display: flex !important;
-        width: 100%;
-        margin-top: 24px;
-    }
-    #dataflash_wrapper_global {
-        margin-right: 0;
-    }
-    #sensor-status {
-        margin-right: 0;
-    }
-    #quad-status_wrapper {
-        margin-right: 0;
-    }
-    #log.active {
-        box-shadow: none;
-    }
-    .logswitch {
-        background-color: #242424;
-    }
-    #scrollicon {
-        display: none;
-    }
-    #tab-content-container {
-        height: calc(100% - 83px);
-    }
-    #tab-content-container.logopen {
-        height: calc(100% - 167px);
-    }
-    #tab-content-container.header_expanded {
-        height: calc(100% - 181px);
-    }
-    #tab-content-container.header_expanded2 {
-        height: calc(100% - 145px);
-    }
-    #tab-content-container.logopen.header_expanded {
-        height: calc(100% - 265px);
-    }
-    #tab-content-container.logopen.header_expanded2 {
-        height: calc(100% - 229px);
-    }
-    .tab_container {
-        position: fixed;
-        z-index: 2000;
-        top: 0;
-        left: -304px;
-        bottom: 0;
-        width: 300px !important;
-        transition: all 0.3s;
-    }
-    .tab_container.reveal {
-        left: 0;
-    }
-    #content {
-        width: 100% !important;
-    }
-    dialog {
-        position: fixed;
-        width: calc(100% - 2em - 2px) !important;
-        max-width: unset;
-        height: auto !important;
-        bottom: 0;
-        top: 56px;
-        border-radius: unset;
-        border: none;
-        overflow: auto;
+.grid-box {
+    display: grid;
+    gap: 1rem;
+    // templates for 1-12 columns
+    &.col1 {
+        grid-template-columns: repeat(1, 1fr);
     }
-    .toolbar_fixed_bottom {
-        .content_toolbar.xs-compressed {
-            padding-left: 60px;
-            box-sizing: border-box;
-            height: 50px;
-            div {
-                margin-bottom: 10px;
-            }
-        }
-        .content_toolbar.xs-compressed.expanded {
-            padding-left: 15px;
-            padding-bottom: 0;
-            height: auto;
-        }
-        .content_toolbar {
-            justify-content: flex-end;
-            div {
-                padding-bottom: 8px;
-            }
-        }
+    &.col2 {
+        grid-template-columns: repeat(2, 1fr);
     }
-    .toolbar_expand_btn {
-        display: block;
+    &.col3 {
+        grid-template-columns: repeat(3, 1fr);
     }
-    .content_toolbar {
-        height: auto;
-        padding: 8px 0 0;
+    &.col4 {
+        grid-template-columns: repeat(4, 1fr);
     }
-    .sm {
-        display: none !important;
+    &.col5 {
+        grid-template-columns: repeat(5, 1fr);
     }
-    .md {
-        display: none !important;
+    &.col6 {
+        grid-template-columns: repeat(6, 1fr);
     }
-    .lg {
-        display: none !important;
-    }
-    .xl {
-        display: none !important;
+    &.col7 {
+        grid-template-columns: repeat(7, 1fr);
     }
-    .grid-col.col1 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    &.col8 {
+        grid-template-columns: repeat(8, 1fr);
     }
-    .grid-col.col2 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-    }
-    .grid-col.col3 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    &.col9 {
+        grid-template-columns: repeat(9, 1fr);
     }
-    .grid-col.col4 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    &.col10 {
+        grid-template-columns: repeat(10, 1fr);
     }
-    .grid-col.col5 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    &.col11 {
+        grid-template-columns: repeat(11, 1fr);
     }
-    .grid-col.col6 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    &.col12 {
+        grid-template-columns: repeat(12, 1fr);
     }
-    .grid-col.col7 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    // templates for individual columns
+    .col-span-1 {
+        grid-column: span 1;
     }
-    .grid-col.col8 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    .col-span-2 {
+        grid-column: span 2;
     }
-    .grid-col.col9 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    .col-span-3 {
+        grid-column: span 3;
     }
-    .grid-col.col10 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    .col-span-4 {
+        grid-column: span 4;
     }
-    .grid-col.col11 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    .col-span-5 {
+        grid-column: span 5;
     }
-    .grid-col.col12 {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+    .col-span-6 {
+        grid-column: span 6;
     }
-}
-@media all and (min-width: 1125px) {
-    .open_firmware_flasher {
-        width: 100px;
+    .col-span-7 {
+        grid-column: span 7;
     }
-    .connect_controls {
-        width: 100px;
+    .col-span-8 {
+        grid-column: span 8;
     }
-    .firmware_b {
-        margin: 0 24px;
+    .col-span-9 {
+        grid-column: span 9;
     }
-    .connect_b {
-        margin: 0 24px;
+    .col-span-10 {
+        grid-column: span 10;
     }
-    #sensor-status {
-        margin-right: 20px;
+    .col-span-11 {
+        grid-column: span 11;
     }
-    #dataflash_wrapper_global {
-        margin-right: 10px;
+    .col-span-12 {
+        grid-column: span 12;
     }
-    #quad-status_wrapper {
-        margin-right: 20px;
+    [class^="col-span-"] {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
     }
 }
 @media not all and (max-width: 575px) {
@@ -2347,25 +2091,16 @@ button.active {
     #tabs {
         li {
             a {
-                font-weight: normal;
-                font-size: 12px;
-                padding-left: 60px;
-                padding-top: 6px;
-                padding-bottom: 2px;
-                content: "";
-                text-shadow: none;
-                transition: none;
-                text-overflow: clip;
-                white-space: nowrap;
-                overflow: hidden;
+                font-size: 0;
+                padding: 0.1rem 0.5rem;
             }
         }
     }
     .tab_container {
-        width: 42px;
+        width: 3.5rem;
     }
     #content {
-        width: calc(100% - 42px);
+        width: calc(100% - 3.5rem);
     }
     .content_wrapper {
         padding: 15px 15px 15px 14px;
@@ -2385,12 +2120,6 @@ button.active {
             line-height: 15px;
         }
     }
-    .cf_table {
-        td {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
-    }
     .default_btn {
         margin-bottom: 10px;
     }
@@ -2407,16 +2136,6 @@ button.active {
             margin-top: 1px;
         }
     }
-    .spacer_box_title {
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-top: 3px;
-        margin-bottom: 0;
-        float: left;
-    }
-    input {
-        font-size: 11px !important;
-    }
     .helpicon {
         float: right;
         margin-top: 5px;
@@ -2433,16 +2152,9 @@ button.active {
         padding: 0 3px 0 3px;
         font-size: 10px;
     }
-    .content_toolbar {
-        .btn {
-            a {
-                margin-right: 15px;
-            }
-        }
-    }
     .toolbar_fixed_bottom {
         .content_wrapper {
-            height: calc(100% - 81px);
+            height: fit-content;
             overflow-y: auto;
             position: initial;
         }
@@ -2458,7 +2170,6 @@ button.active {
                 padding-top: 6px;
                 padding-bottom: 2px;
                 content: "";
-                text-shadow: none;
                 transition: none;
                 text-overflow: clip;
                 white-space: nowrap;
@@ -2516,9 +2227,6 @@ button.active {
         margin-bottom: 0;
         float: left;
     }
-    input {
-        font-size: 11px !important;
-    }
     .helpicon {
         float: right;
         margin-top: 5px;
@@ -2550,6 +2258,248 @@ button.active {
         }
     }
 }
+@media all and (max-width: 575px) {
+    #tabs li a {
+        font-size: 13px;
+        padding-top: 0.2rem;
+        padding-bottom: 0.25rem;
+        padding-left: 2.5rem;
+    }
+    #side_menu_swipe {
+        display: block;
+    }
+    .visible-on-desktop-only {
+        display: none !important;
+    }
+    .headerbar {
+        // max-height: 10rem;
+        height: unset;
+        flex-wrap: wrap;
+        align-items: center;
+        box-sizing: border-box;
+        transition: all 0.3s;
+        padding-top: 0.5rem;
+        padding-bottom: 0;
+        .web-port-picker {
+            transition: all 0.2s;
+            // min-height: 0;
+            max-height: 0;
+            overflow-y: hidden;
+            padding-top: 0 !important;
+            margin-left: 0 !important;
+            width: 100%;
+            justify-content: end;
+        }
+    }
+    .headerbar.expand {
+        .web-port-picker {
+            max-height: 4.5rem;
+            #portsinput {
+                height: 4.5rem;
+            }
+        }
+    }
+    .headerbar.expand2 {
+        height: fit-content;
+    }
+    #firmware-virtual-option {
+        margin-right: 0;
+        max-width: calc(100% - 13rem);
+        #firmware-version-dropdown {
+            width: 100%;
+        }
+    }
+    #port-override-option {
+        label {
+            flex-direction: column;
+            align-items: start !important;
+        }
+    }
+    #menu_btn {
+        display: block;
+        order: 1;
+    }
+    #reveal_btn {
+        display: block;
+        order: 4;
+    }
+    #header_btns {
+        margin-left: auto;
+        order: 3;
+        gap: 1rem;
+    }
+    .firmware_b, .connect_b {
+        height: fit-content !important;
+        width: fit-content !important;
+        a {
+            height: 2rem !important;
+            width: 2rem !important;
+            background-size: 1.5rem !important;
+            background-position: center !important;
+        }
+    }
+    .web-port-picker {
+        order: 5;
+    }
+    #port-picker {
+        display: none !important;
+        order: 5;
+        justify-content: space-between;
+        margin-top: 15px;
+        transition: all 0.2s;
+    }
+    .header-wrapper {
+        display: none !important;
+        order: 5;
+        justify-content: space-around;
+    }
+    .flash_state {
+        display: none !important;
+    }
+    .connect_state {
+        display: none !important;
+    }
+    #port-picker.reveal {
+        display: flex !important;
+        width: 100%;
+        margin-left: 0;
+    }
+    #portsinput {
+        display: flex;
+        gap: 5px;
+        margin-right: 0;
+    }
+    .header-wrapper.reveal {
+        display: flex !important;
+        width: 100%;
+        margin-top: 24px;
+    }
+    #dataflash_wrapper_global {
+        margin-right: 0;
+    }
+    #sensor-status {
+        margin-right: 0;
+    }
+    #quad-status_wrapper {
+        margin-right: 0;
+    }
+    #log.active {
+        box-shadow: none;
+    }
+    .logswitch {
+        background-color: var(--surface-200);
+        padding: 0.25rem;
+    }
+    #scrollicon {
+        display: none;
+    }
+    .tab_container {
+        position: fixed;
+        z-index: 2000;
+        top: 0;
+        left: -100%;
+        bottom: 0;
+        width: 50% !important;
+        transition: all 0.3s;
+        padding: 1rem;
+    }
+    .tab_container.reveal {
+        left: 0;
+    }
+    #content {
+        width: 100% !important;
+    }
+    .info {
+        width: 100%;
+        flex: unset !important;
+    }
+    dialog {
+        position: fixed;
+        width: calc(100% - 2em - 2px) !important;
+        max-width: unset;
+        height: auto !important;
+        bottom: 0;
+        top: 56px;
+        border-radius: unset;
+        border: none;
+        overflow: auto;
+    }
+    .toolbar_expand_btn {
+        display: block;
+    }
+    .sm {
+        display: none !important;
+    }
+    .md {
+        display: none !important;
+    }
+    .lg {
+        display: none !important;
+    }
+    .xl {
+        display: none !important;
+    }
+    .grid-col.col1 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col2 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col3 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col4 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col5 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col6 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col7 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col8 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col9 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col10 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col11 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .grid-col.col12 {
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+}
 @media all and (min-width: 576px) and (max-width: 767px) {
     .xs {
         display: none !important;
@@ -2631,7 +2581,7 @@ button.active {
         display: none !important;
     }
 }
-@media all and (max-width: 767px) {
+@media all and (max-width: 575px) {
     .sm-min {
         display: none !important;
     }
diff --git a/src/css/receiver_msp/receiver_msp.less b/src/css/receiver_msp/receiver_msp.less
index 6cd8808636..fe48a1d405 100644
--- a/src/css/receiver_msp/receiver_msp.less
+++ b/src/css/receiver_msp/receiver_msp.less
@@ -1,14 +1,18 @@
 body {
 	font-family: 'Segoe UI', Tahoma, sans-serif;
 	font-size: 12px;
-	background-color: var(--sideBackground);
-	color: #303030;
-	margin: 10px;
+	background-color: var(--surface-100);
+	color: var(--text);
 	overflow: hidden;
 	user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
 }
 .control-gimbals {
-	padding: 25px;
+	padding: 1.5rem;
 	padding-bottom: 0;
 	text-align: center;
 	display: inline-flex;
@@ -17,10 +21,10 @@ body {
 	position: relative;
 	width: 120px;
 	height: 120px;
-	background-color: var(--gimbalBackground);
-	margin-left: 1em;
-	margin-right: 1em;
-	margin-bottom: 2em;
+	background-color: var(--surface-200);
+	margin-left: 1.5rem;
+	margin-right: 1.5rem;
+	margin-bottom: 2rem;
 	display: inline-block;
 	border-radius: 5px;
 	cursor: pointer;
@@ -28,7 +32,7 @@ body {
 .crosshair {
 	display: block;
 	position: absolute;
-	background-color: var(--gimbalCrosshair);
+	background-color: var(--surface-500);
 }
 .crosshair-vert {
 	width: 1px;
@@ -46,17 +50,17 @@ body {
 	text-align: center;
 }
 .gimbal-label-horz {
-	top: calc(100% + 0.5em);
+	top: calc(100% + 1rem);
 	width: 100%;
 }
 .gimbal-label-vert {
 	transform: rotate(-90deg);
 	top: calc(50% - 0.5em);
 	width: 100%;
-	left: calc(-50% - 1em);
+	left: calc(-50% - 1.5rem);
 }
 .control-stick {
-	background-color: #ff3232;
+	background-color: var(--primary-500);
 	width: 20px;
 	height: 20px;
 	margin-left: -10px;
@@ -66,12 +70,15 @@ body {
 	position: absolute;
 	cursor: pointer;
 }
-.control-slider {
-	margin: 20px;
-	.slider {
-		margin-left: 50px;
-		margin-right: 50px;
-	}
+.control-sliders {
+    width: 100%;
+    .control-slider {
+        margin: 20px;
+        .slider {
+            margin-left: 50px;
+            margin-right: 50px;
+        }
+    }
 }
 .tooltip {
 	position: absolute;
@@ -92,21 +99,23 @@ a {
 		text-decoration: none;
 	}
 }
+.warning {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 .button-enable {
+    width: fit-content;
 	a {
-		position: absolute;
-		left: 50%;
-		transform: translate(-50%);
+        width: fit-content;
 		margin-top: 20px;
 		margin-bottom: 0px;
 		margin-left: 0px;
-		background-color: var(--accent);
+		background-color: var(--primary-500);
 		border-radius: 3px;
-		border: 1px solid #4c8829;
-		color: #fff;
-		float: left;
+		border: 1px solid var(--primary-600);
+		color: var(--surface-50);
 		font-size: 12px;
-		text-shadow: 0px 1px #00000040;
 		display: block;
 		cursor: pointer;
 		transition: all ease 0.2s;
@@ -114,14 +123,24 @@ a {
 		padding-left: 9px;
 		padding-right: 9px;
 		line-height: 28px;
-		&:hover {
-			background-color: #6ac435;
-			transition: all ease 0.2s;
-		}
+        &:hover {
+            background-color: var(--primary-400);
+            transition: all ease 0.2s;
+        }
 		&:active {
-			background-color: #4d9324;
+			background-color: var(--success-500);
+            border: 1px solid var(--success-600);
 			transition: all ease 0.0s;
 			box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35);
 		}
 	}
 }
+
+@media all and (max-width: 575px) {
+    body {
+        height: unset !important;
+    }
+    .control-gimbals {
+        padding-top: 0;
+    }
+}
diff --git a/src/css/select2_custom.less b/src/css/select2_custom.less
index 4901c76349..0193e039fb 100644
--- a/src/css/select2_custom.less
+++ b/src/css/select2_custom.less
@@ -6,20 +6,15 @@
 }
 .select2-selection__rendered {
     line-height: 18px !important;
-    padding-left: 4px !important;
-    color: var(--defaultText) !important;
-    border-radius: 2px !important;
-}
-.select2-container {
-    .select2-selection--single {
-        height: 20px !important;
-        border-radius: 3px !important;
-        border: 1px solid var(--subtleAccent) !important;
-        cursor: default !important;
-    }
+    color: var(--text) !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    padding-left: 0 !important;
+    gap: 0.5rem !important;
+    align-items: center !important;
 }
 .select2-selection__arrow {
-    height: 19px !important;
+    height: 28px !important;
     top: 0 !important;
     b {
         height: 5px !important;
@@ -27,13 +22,63 @@
         margin-left: -2px !important;
         margin-top: -5px !important;
         border: none !important;
-        border-bottom: 1.5px solid black !important;
-        border-right: 1.5px solid black !important;
+        border-bottom: 1.5px solid var(--text) !important;
+        border-right: 1.5px solid var(--text) !important;
         transform: rotateZ(45deg);
     }
 }
 .select2-dropdown {
-    border: 0.5px solid var(--subtleAccent) !important;
+    border: 0.5px solid var(--surface-500) !important;
     border-top: none !important;
     border-radius: 2px !important;
 }
+
+.select2-results {
+    background-color: var(--surface-300) !important;
+}
+
+.select2-search {
+    background-color: var(--surface-300);
+}
+
+.select2-results__option--highlighted {
+    background-color: var(--surface-400) !important;
+}
+
+// aria selected
+.select2-results__option[aria-selected=true] {
+    background-color: var(--primary-500) !important;
+    color: var(--surface-100) !important;
+}
+
+.select2-container--default {
+    .select2-selection--multiple {
+        background-color: var(--surface-300) !important;
+        border: 1px solid var(--surface-500) !important;
+        .select2-selection__rendered {
+            padding: 0.25rem 0.5rem !important;
+        }
+    }
+    .select2-selection__choice {
+        background-color: var(--surface-500) !important;
+        border: 1px solid var(--surface-500) !important;
+        color: var(--text) !important;
+        margin: 0 !important;
+        float: none !important;
+        width: fit-content !important;
+        height: fit-content !important;
+        padding: 0.1rem 0.5rem !important;
+    }
+    .select2-search--inline {
+        float: none !important;
+        margin: 0 !important;
+        .select2-search__field {
+            background-color: transparent !important;
+            border: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            font-size: 13.3333px !important;
+            border-radius: 0 !important;
+        }
+    }
+}
diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less
index 927b42d6b0..3a9ff23139 100644
--- a/src/css/tabs/adjustments.less
+++ b/src/css/tabs/adjustments.less
@@ -4,7 +4,7 @@
 .tab-adjustments {
 	.range {
 		.marker {
-			background: var(--accent);
+			background: var(--primary-200);
 		}
 		&:first-child {
 			border-top: 0px;
@@ -15,63 +15,55 @@
 	}
 	.channel-slider {
 		.noUi-connect {
-			background: var(--accent);
+			background: var(--primary-500);
 		}
 	}
+    table {
+        border-radius: 0.5rem;
+        overflow: hidden;
+    }
 	.adjustments {
 		width: 100%;
 		border-spacing: 0px;
-		background-color: #e4e4e4;
 		thead {
 			td {
 				text-align: center;
 				white-space: nowrap;
 				padding: 10px 10px;
-				background-color: var(--quietHeader);
-				color: var(--quietText);
-				&:first-child {
-					border-top-left-radius: 5px;
-				}
-				&:last-child {
-					border-top-right-radius: 5px;
-				}
+				background-color: var(--surface-300);
+				color: var(--text);
 			}
 		}
 	}
 	td {
-		border-top: 1px solid #fff;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-top: 1px solid var(--surface-500);
+		border-bottom: 1px solid var(--surface-500);
+        padding: 0 0.5rem;
 	}
 	.adjustment {
+        background-color: var(--surface-300);
 		&:nth-child(odd) {
-			background-color: #f4f4f4;
-		}
-		select {
-			border-radius: 3px;
-			border: 1px solid var(--subtleAccent);
+			background-color: var(--surface-200);
 		}
 		td {
 			text-align: center;
 		}
 		.info {
-			width: 5%;
-			height: 80px;
+			height: 6.5rem;
 			.enabling {
 				white-space: nowrap;
 			}
 		}
 		.channelInfo {
-			width: 5%;
-			padding: 0px 10px;
 			.limits {
-				padding: 5px 0px;
+				padding: 0.5rem 0;
 			}
 		}
 		.range {
-			width: 65%;
-			padding: 0px 20px;
+			width: 100%;
+			padding: 0 1rem;
 			.channel-slider {
-				margin-top: -28px;
+				margin-top: -2rem;
 			}
 			.marker {
 				position: absolute;
@@ -84,19 +76,10 @@
 				z-index: 1000;
 			}
 		}
-		.functionSelection {
-			width: 5%;
-		}
-		.adjustmentSlot {
-			width: 5%;
-		}
-		.functionSwitchChannel {
-			width: 5%;
-		}
 	}
 }
 .noUi-target {
-	border-radius: 4px;
+	border-radius: 0.5rem;
 }
 @media all and (max-width: 575px) {
 	.tab-adjustments {
diff --git a/src/css/tabs/auxiliary.less b/src/css/tabs/auxiliary.less
index 50fb52d170..af1e0cf0d2 100644
--- a/src/css/tabs/auxiliary.less
+++ b/src/css/tabs/auxiliary.less
@@ -1,5 +1,4 @@
 .tab-auxiliary {
-	float: left;
 	width: 100%;
 	.help {
 		padding: 10px;
@@ -8,29 +7,31 @@
 	}
 	.toolbox {
 		font-weight: bold;
-		color: rgb(105, 99, 99);
-		padding: 10px 5px;
+        padding: 1rem 0;
+        form {
+            display: flex;
+            gap: 0.5rem;
+        }
 	}
 	.range {
 		.marker {
-			background: var(--accent);
+			background: var(--primary-500);
 			border-radius: 3px;
 			position: absolute;
 			left: 50%;
-			top: 27px;
-			height: 13px;
+			top: 2rem;
+			height: 1rem;
 			width: 6px;
 			margin-left: -3px;
 			z-index: 1000;
 		}
 		position: relative;
 		height: 70px;
-		padding-top: 15px;
+		padding-top: 1rem;
 		padding-left: 0;
+		padding-bottom: 0.5rem;
 		border-top: 1px solid #fff;
-		border-bottom: 1px solid var(--subtleAccent);
-		background-color: #ececec;
-		padding-bottom: 5px;
+		border-bottom: 1px solid var(--surface-500);
 		&:first-child {
 			border-top: 0;
 		}
@@ -46,165 +47,160 @@
 			}
 		}
 		.channel {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 			margin-bottom: 3px;
 		}
 		.channel-slider {
-			float: left;
-			width: 77%;
-			margin-left: 20px;
-			margin-top: -4px;
+            width: 100%;
+            margin-right: 1.5rem;
 		}
 	}
 	.channel-slider {
 		.noUi-connect {
-			background: var(--accent);
-			border-radius: 3px;
+			background: var(--primary-500);
+			border-radius: 0.25rem;
 		}
 	}
-	.modes {
-		width: 100%;
-	}
-	.mode {
-		background-color: #f9f9f9;
-		vertical-align: top;
-		display: flex;
-
-		&.on {
-			.info {
-				background: var(--accent) !important;
-				color: black;
-			}
-			&:nth-child(odd) {
-				.info {
-					background: var(--accent) !important;
-				}
-			}
+	.mode.on {
+		.info {
+			background: var(--primary-500);
+			color: black;
 		}
-		&.off {
+		&:nth-child(odd) {
 			.info {
-				background: #828885 !important;
-				color: white;
-			}
-			&:nth-child(odd) {
-				.info {
-					background: #828885 !important;
-				}
+				background: var(--primary-500);
 			}
 		}
-		&.disabled {
+        .buttons {
+            a {
+                background-color: var(--primary-300);
+                color: black;
+                &:hover {
+                    background-color: var(--primary-200);
+                    color: black;
+                }
+            }
+        }
+	}
+	.mode.off {
+		.info {
+			background: var(--surface-300);
+			color: var(--surface-950);
+		}
+		&:nth-child(odd) {
 			.info {
-				background: var(--error) !important;
-				color: var(--quietText);
-			}
-			&:nth-child(odd) {
-				.info {
-					background: var(--error) !important;
-				}
+				background: var(--surface-300);
 			}
-		}	
+		}
+        .buttons {
+            a {
+                background-color: var(--surface-400);
+                color: var(--surface-950);
+                &:hover {
+                    background-color: var(--surface-500);
+                    color: var(--surface-950);
+                }
+            }
+        }
+	}
+	.mode.disabled {
+		.info {
+			background: var(--error-transparent-4);
+			color: var(--text);
+            .buttons {
+                a {
+                    background-color: var(--error-500);
+                    &:hover {
+                        background-color: var(--error-400);
+                    }
+                }
+            }
+		}
+	}
+	.modes {
+		width: 100%;
+	}
+	.mode {
+		background-color: var(--surface-200);
+		vertical-align: top;
+		display: flex;
+        margin-bottom: 0.5rem;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        height: 6.5rem;
 		.name {
-			min-height: 80px;
-			padding: 5px 0;
+            padding: 0.5rem;
 		}
 		.info {
 			text-align: center;
-			width: 10%;
+			width: fit-content;
 			white-space: nowrap;
 			position: relative;
-			background-color: #e4e4e4;
-			border-bottom: 5px solid white;
-			color: grey;
+			background-color: var(--surface-300);
+            padding: 0.5rem;
 			.name {
 				font-weight: bold;
 				font-size: 1.0em;
 			}
 			.buttons {
-				position: absolute;
-				bottom: 0;
-				width: 100%;
 				a {
-					padding: 2px 5px;
-					border-radius: 4px;
+					padding: 0.25rem 0.5rem;
+					border-radius: 0.5rem;
 					cursor: pointer;
 					margin: 3px;
 					display: block;
-					&:hover {
-						background-color: darkgrey;
-					}
 				}
 			}
 		}
 		.range {
+            display: flex;
 			.channelInfo {
-				float: left;
-				min-width: 90px;
-				text-align: center;
-				margin-top: -4px;
-				margin-left: 5px;
-			}
-		}
-		.link {
-			.modeInfo {
-				float: left;
+				min-width: 8rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
 			}
 		}
 	}
 	.ranges {
-		padding-right: 0;
-		border-bottom: 5px solid white;
-		width: 90%;
-		max-width: calc(100% - 140px);
+        width: 100%;
 	}
 	.link {
-		position: relative;
-		height: 70px;
-		padding-top: 15px;
-		padding-left: 15px;
-		border-top: 1px solid #fff;
-		border-bottom: 1px solid var(--subtleAccent);
-		background-color: #ececec;
-		padding-bottom: 5px;
+        height: 100%;
+		padding-top: 1rem;
+		padding-left: 1rem;
+		padding-bottom: 0.5rem;
+		border-bottom: 1px solid var(--surface-500);
+		background-color: var(--surface-400);
+        display: flex;
+        gap: 0.5rem;
 		&:first-child {
 			border-top: 0;
 		}
 		&:last-child {
 			border-bottom: 0;
 		}
-		.linkedTo {
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-			margin-bottom: 3px;
-		}
+        .delete {
+            a {
+                margin-top: 0.35rem;
+            }
+        }
 	}
 	.logic {
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-700);
 		border-radius: 3px;
 	}
-	>.buttons {
-		margin-top: 10px;
-		a {
-			float: right;
-			height: 28px;
-			line-height: 28px;
-			padding: 0 15px 0 15px;
-			display: block;
-			color: #000;
-		}
-	}
 	.buttons {
 		a {
 			text-align: center;
 			font-weight: bold;
-			background-color: #fff;
-			color: black;
-			opacity: 0.8;
+			background-color: var(--surface-400);
+			color: var(--text);
 			transition: all ease 0.3s;
 			&:hover {
-				background-color: #fff;
+				background-color: var(--surface-500);
 				opacity: 1.0;
-				color: black;
 				transition: all ease 0.3s;
 			}
 		}
@@ -216,7 +212,6 @@
 			transition: all ease 0.3s;
 			opacity: 0.3;
 			position: relative;
-			float: right;
 			margin-right: 5px;
 			margin-top: -9px;
 			background-image: url('../../images/icons/close1.svg');
@@ -229,62 +224,43 @@
 			}
 		}
 	}
-	.fixed_band {
-		bottom: 0;
-	}
-	.save_btn {
-		a {
-			line-height: 28px;
-		}
-	}
 }
 #tab-auxiliary-templates {
 	display: none;
 }
-@media only screen and (max-width: 1055px) {
-	.tab-auxiliary {
-		.fixed_band {
-			width: calc(100% - -30px);
-			margin: 0 0 0 -15px;
-			.save_btn {
-				a {
-					margin-right: 15px;
-				}
-			}
-		}
-	}
-}
-@media only screen and (max-device-width: 1055px) {
-	.tab-auxiliary {
-		.fixed_band {
-			width: calc(100% - -30px);
-			margin: 0 0 0 -15px;
-			.save_btn {
-				a {
-					margin-right: 15px;
-				}
-			}
-		}
-	}
-}
 @media all and (max-width: 575px) {
 	.tab-auxiliary {
 		.mode {
 			flex-wrap: wrap;
+            height: fit-content;
 			.info {
 				width: 100%;
 				border-bottom: 0;
+                display: flex;
+                flex-direction: row-reverse;
+                justify-content: space-between;
+                align-items: center;
 				.name {
 					text-align: left;
-					padding-left: 10px;
 					min-height: auto;
+                    margin-right: auto;
 				}
 				.buttons {
 					right: 0;
 					width: auto;
 					display: flex;
 				}
+                .helpicon {
+                    margin-top: 0;
+                }
 			}
+            // offset "add" button for ARM mode since the "link" button is hidden
+            // keeps the layout consistent with other modes
+            &:first-of-type {
+                .buttons {
+                    margin-left: 2.5rem;
+                }
+            }
 			.ranges {
 				width: 100%;
 				max-width: 100%;
@@ -304,7 +280,7 @@
 			flex-wrap: wrap;
 			.channel-slider {
 				width: 100%;
-				margin: 10px 10px 45px 10px;
+				margin: 0.5rem 1rem 3.5rem 1rem;
 			}
 		}
 		.limits {
@@ -317,7 +293,6 @@
 				margin-top: 15px;
 				margin-right: 10px;
 				position: absolute;
-				float: none;
 				top: 0;
 				right: 0;
 			}
diff --git a/src/css/tabs/cli.less b/src/css/tabs/cli.less
index 49d79b5300..dff2b319ee 100644
--- a/src/css/tabs/cli.less
+++ b/src/css/tabs/cli.less
@@ -8,10 +8,10 @@
 	}
 	p {
 		padding: 0;
-		border: 0 dotted var(--subtleAccent);
+		border: 0 dotted var(--surface-500);
 	}
 	.backdrop {
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		background-color: rgba(0, 0, 0, 0.75);
 		margin-top: 0;
 		flex-grow: 1;
@@ -53,8 +53,9 @@
 		height: 22px;
 		line-height: 20px;
 		padding-left: 5px;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		resize: none;
+        background-color: var(--surface-200);
 	}
 	textarea[name='supportWarningDialogInput'] {
 		-webkit-box-sizing: border-box;
@@ -63,7 +64,7 @@
 		height: 22px;
 		line-height: 20px;
 		padding-left: 5px;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		resize: none;
 	}
 	#content-watermark {
@@ -87,7 +88,7 @@
 	}
 }
 .cli-textcomplete-dropdown {
-	border: 1px solid var(--subtleAccent);
+	border: 1px solid var(--surface-500);
 	background-color: white;
 	border-radius: 5px;
 	max-height: 50%;
diff --git a/src/css/tabs/configuration.less b/src/css/tabs/configuration.less
index 62000b2f60..a08c0c4c31 100644
--- a/src/css/tabs/configuration.less
+++ b/src/css/tabs/configuration.less
@@ -1,261 +1,8 @@
 .tab-configuration {
-	.ui-grid-col {
-		margin-bottom: 0;
-	}
-	input {
-		border: 1px solid var(--subtleAccent);
-		width: 230px;
-		height: 20px;
-		margin-right: 15px;
-		border-radius: 3px;
-		float: left;
-	}
-	select {
-		border: 1px solid var(--subtleAccent);
-		width: 230px;
-		height: 20px;
-		float: left;
-		margin-right: 15px;
-		border-radius: 3px;
-	}
-	table {
-		margin-bottom: 0;
-		width: 100%;
-		float: left;
-		padding: 0;
-		text-align: left;
-		th {
-			text-align: left;
-			padding: 3px;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		td {
-			text-align: left;
-			padding: 5px 3px;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		tr {
-			td {
-				&:first-child {
-					text-align: left;
-					width: 55px;
-				}
-			}
-		}
-		thead {
-			tr {
-				&:first-child {
-					background-color: #ececec;
-				}
-			}
-		}
-	}
-	position: relative;
-	.groupTitle {
-		padding: 0 0 5px 0;
-		margin: 0 0 10px 0;
-		font-size: 16px;
-		border-bottom: 1px solid var(--subtleAccent);
-	}
-	.featuresMultiple {
-		border-collapse: collapse;
-		margin-bottom: 5px;
-		margin-top: -5px;
-		padding: 0;
-	}
-	dl.features {
-		dt {
-			float: left;
-			width: 10px;
-			height: 18px;
-			line-height: 18px;
-			input {
-				margin-top: 2px;
-			}
-		}
-		dd {
-			margin: 0 0 0 20px;
-			height: 18px;
-			line-height: 18px;
-		}
-	}
-	.number {
-		input {
-			width: 55px;
-			padding-left: 3px;
-			height: 20px;
-			line-height: 20px;
-			text-align: left;
-			border-radius: 3px;
-			margin-right: 11px;
-			font-size: 12px;
-			font-weight: normal;
-		}
-		.disabled {
-			width: 48px;
-			padding: 0 5px;
-			background-color: #ececec;
-		}
-		span {
-			margin-left: 0;
-		}
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-		float: left;
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-		}
-	}
-	.freelabel {
-		margin-left: 10px;
-		position: relative;
-	}
-	span {
-		margin: 0;
-	}
-	.spacer_box {
-		padding-bottom: 10px;
-		float: left;
-		width: calc(100% - 20px);
-	}
-	.select {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-		float: left;
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-		}
-	}
-	.board_align_inputs {
-		margin-bottom: 5px;
-		padding-bottom: 5px;
-		width: 33.3%;
-		float: left;
-		white-space: nowrap;
-		input {
-			width: 3.5em;
-			height: 20px;
-			line-height: 20px;
-			padding-left: 3px;
-		}
-		label {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-	.gyro_alignment_inputs {
-		margin-bottom: 5px;
-		padding-bottom: 5px;
-		width: 33.3%;
-		float: left;
-		white-space: nowrap;
-		label {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-	.gui_box_titlebar {
-		margin-bottom: 0;
-	}
-	.numberspacer {
-		float: left;
-		width: 65px;
-		height: 21px;
-	}
-	thead {
-		display: none;
-	}
-	.gui_box {
-		margin-bottom: 10px;
-		float: left;
-		font-weight: bold;
-		span {
-			font-style: normal;
-			font-weight: normal;
-			line-height: 19px;
-			color: #4f4f4f;
-			font-size: 11px;
-		}
-	}
-	.tab-configuration {
-		.system {
-			.gui_box {
-				float: left;
-			}
-		}
-	}
-	.board {
-		.gui_box {
-			float: left;
-		}
-		select {
-			float: left;
-			width: fit-content;
-			max-width: 50%;
-			height: 20px;
-			margin-right: 5px;
-			border-radius: 3px;
-		}
-	}
-	.acc {
-		.gui_box {
-			float: left;
-		}
-	}
-	.other {
-		.gui_box {
-			float: left;
-			margin-bottom: 10px;
-		}
-		tr {
-			&:last-child {
-				td {
-					border-bottom: 0;
-					padding-bottom: 0;
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
-	.beeper-configuration {
-		tr {
-			&:last-child {
-				td {
-					border-bottom: 0;
-					padding-bottom: 0;
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
-	.dshotBeaconConditions {
-		tr {
-			&:last-child {
-				td {
-					border-bottom: 0;
-					padding-bottom: 0;
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
 	.alignicon {
 		width: 15px;
 		height: 15px;
-		float: left;
-		margin: 3px;
+        margin: 3px;
 	}
 	.pitch {
 		background-image: url(../../images/icons/cf_icon_pitch.svg);
@@ -272,129 +19,54 @@
 		background-repeat: no-repeat;
 		background-position: center;
 	}
-	.board_align_content {
-		width: 100%;
-		border-bottom: 1px solid var(--subtleAccent);
-		display: inline-block;
-	}
-	.gyro_align_content {
-		width: 100%;
-		border-bottom: 1px solid var(--subtleAccent);
-		display: inline-block;
-	}
-	.sensoralignment {
-		span {
-			width: 100%;
-		}
-	}
-	.gyroSyncDenom {
-		width: 90px;
-	}
-	.pidProcessDenom {
-		width: 90px;
-	}
-	.gyroFrequency {
-		width: 90px;
-		border: none;
-		background-color: var(--alternativeBackground);
-		padding-left: 6px;
-		margin-right: 10px;
-		font-weight: bold;
-	}
-}
-@media only screen and (max-width: 1055px) {
-	.tab-configuration {
-		.gui_box {
-			span {
-				line-height: 17px;
-			}
-		}
-		.system {
-			.gui_box {
-				float: left;
-			}
-		}
-		.board {
-			.gui_box {
-				float: left;
-			}
-		}
-		.acc {
-			.gui_box {
-				float: left;
-			}
-		}
-		.gps {
-			.gui_box {
-				float: left;
-			}
-		}
-		.other {
-			.gui_box {
-				float: left;
-			}
-		}
-	}
-}
-@media only screen and (max-device-width: 1055px) {
-	.tab-configuration {
-		.gui_box {
-			span {
-				line-height: 17px;
-			}
-		}
-		.system {
-			.gui_box {
-				float: left;
-			}
-		}
-		.board {
-			.gui_box {
-				float: left;
-			}
-		}
-		.acc {
-			.gui_box {
-				float: left;
-			}
-		}
-		.gps {
-			.gui_box {
-				float: left;
-			}
-		}
-		.other {
-			.gui_box {
-				float: left;
-			}
-		}
-	}
-}
-@media all and (max-width: 575px) {
-	.tab-configuration {
-		.system {
-			.gui_box {
-				min-height: auto;
-			}
-		}
-		.gps {
-			td {
-				&:nth-child(2) {
-					width: auto;
-				}
-			}
-		}
-	}
-	.dshotbeacon {
-		>td {
-			>div.select {
-				>div {
-					width: 100%;
-				}
-			}
-		}
-		select.dshotBeeperBeaconTone {
-			width: 100%;
-		}
-	}
+    .board_align_content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        .board_align_inputs {
+            display: flex;
+            label {
+                display: flex;
+                white-space: nowrap;
+            }
+        }
+    }
+    .gyro_align_content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    table {
+        td {
+            height: 1.75rem;
+        }
+        tbody.features {
+            tr {
+                td:nth-child(3) {
+                    font-weight: bold;
+                }
+            }
+        }
+        tbody.beeper-configuration {
+            tr {
+                td:nth-child(2) {
+                    font-weight: bold;
+                    padding-left: 1.5rem;
+                    padding-right: 1.5rem;
+                }
+            }
+        }
+    }
+    thead {
+        display: none;
+    }
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col2 {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
 }
diff --git a/src/css/tabs/failsafe.less b/src/css/tabs/failsafe.less
index b9904e6791..bb2d9764e9 100644
--- a/src/css/tabs/failsafe.less
+++ b/src/css/tabs/failsafe.less
@@ -1,99 +1,43 @@
 .tab-failsafe {
 	position: relative;
-	.leftWrapper {
-		float: left;
-		width: calc(50% - 20px);
-	}
-	.rightWrapper {
-		float: left;
-		width: calc(50% - 0px);
-		margin: 0 0 0 20px;
-		.spacer_box {
-			padding-bottom: 7px;
-		}
-	}
 	.number {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-		float: left;
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-		}
-		input {
-			width: 50px;
-			padding-left: 3px;
-			height: 20px;
-			line-height: 20px;
-			text-align: left;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-			margin-right: 11px;
-			font-size: 12px;
-			font-weight: normal;
-			&:disabled {
-				background-color: #ececec;
-			}
-		}
-		.switchery {
-			margin-right: 16px;
-		}
+        label {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            gap: 0.5rem;
+        }
 		span {
 			margin-left: 0;
 		}
 	}
-	.checkbox {
-		float: left;
-		width: 100%;
-		margin-bottom: 6px;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		margin-top: 0;
-		&:last-child {
-			border-bottom: none;
-		}
-	}
 	.subline {
-		float: left;
 		width: 100%;
-		font-size: 13px;
-		margin-top: 15px;
-		margin-bottom: 5px;
 	}
 	.radioarea {
-		float: left;
-		width: 100%;
-		border-radius: 5px;
-		background-color: #ededed;
+		border-radius: 0.5rem;
+		background-color: var(--surface-300);
 		margin-bottom: 0;
-		margin-top: 5px;
-		min-height: 90px;
-		padding-bottom: 10px;
+		margin-top: 0.5rem;
+		min-height: 5rem;
+		padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 	}
 	.radiobuttons {
-		float: left;
-		width: 50%;
-		margin-top: 38px;
-		margin-left: 15px;
-		font-size: 12px;
-		font-weight: normal;
-		input {
-			margin-right: 8px;
-			margin-bottom: 10px;
-		}
+		width: fit-content;
+        display: flex;
+        align-items: center;
+        margin-left: 1rem;
+        height: 5rem;
 		label {
-			float: left;
-			width: 130px;
+			width: 8rem;
 			margin-top: -2px;
 		}
 	}
 	.proceduresettings {
-		padding: 10px;
-		margin-top: 75px;
+		padding: 0.5rem;
 	}
 	.pro1 {
 		background-image: url(../../images/icons/cf_failsafe_procedure1.svg);
@@ -119,126 +63,23 @@
 		background-size: 200px;
 		background-repeat: no-repeat;
 	}
-	.spacer_box {
-		.helpicon {
-			margin-top: 3px;
-			margin-right: 0;
-		}
-		padding-bottom: 10px;
-		float: left;
-		width: calc(100% - 20px);
-	}
-	.freelabel {
-		margin-left: 10px;
-		position: relative;
-	}
-	input {
-		float: left;
-	}
-	span {
-		margin: 0;
-	}
-	.gui_box_titlebar {
-		margin-bottom: 0;
-	}
-	.numberspacer {
-		float: left;
-		width: 65px;
-		height: 21px;
-	}
-	.gui_box {
-		font-style: normal;
-		font-weight: bold;
-		margin-bottom: 15px;
-		float: left;
-		span {
-			font-style: normal;
-			font-weight: normal;
-			line-height: 19px;
-			color: #4f4f4f;
-			font-size: 11px;
-		}
-	}
-	.stage1 {
-		.number {
-			input {
-				float: right;
-				margin-right: 0;
-			}
-		}
-		select {
-			float: left;
-			width: 95%;
-			height: 22px;
-			margin: 0;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
-	}
-	.modename {
-		background-color: #828885;
-		border-radius: 3px;
-		border: 1px solid #686c6a;
-		color: #fff !important;
-		font-weight: 600 !important;
-		padding-left: 3px;
-		padding-right: 3px;
-		margin-right: 3px;
-	}
 	.channelprimary {
-		float: left;
 		width: 60%;
 	}
 	.channelauxiliary {
-		float: left;
 		width: 60%;
-		padding-top: 2px;
-	}
-	.channelname {
-		margin-right: 3px;
-	}
-	.channelsetting {
-		float: left;
-		width: 25%;
-	}
-	.auxiliary {
-		float: left;
-		width: 15%;
 	}
 	.cf_tooltiptext {
 		display: none;
 	}
-	.featuresNew {
-		width: 100%;
-		tr {
-			width: 100%;
-			border-bottom: 1px solid var(--subtleAccent);
-			float: left;
-			padding: 0 0 6px;
-			margin-bottom: 3px;
-		}
-		td {
-			&:first-child {
-				width: 52px;
-			}
-			&:last-child {
-				width: calc(100% - 125px);
-				margin-right: 0;
-			}
-			float: left;
-			margin-right: 10px;
-		}
-		.helpicon {
-			margin-right: -2px;
-		}
-	}
 	table {
 		width: 100%;
 	}
-	.switchMode {
-		border: 1px solid var(--subtleAccent);
-		border-radius: 3px;
-		margin-right: 5px;
-		min-width: 80px;
-	}
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col2 {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
 }
diff --git a/src/css/tabs/firmware_flasher.less b/src/css/tabs/firmware_flasher.less
index 769050c2d6..e5ae12d146 100644
--- a/src/css/tabs/firmware_flasher.less
+++ b/src/css/tabs/firmware_flasher.less
@@ -1,54 +1,35 @@
 .tab-firmware_flasher {
 	.build-options-wrapper {
 		.select2-container {
-			width: calc(100% - 30px)!important;
+			width: calc(100% - 2rem)!important;
 		}
 		.helpicon {
 			margin-top: 8px;
 		}
 	}
 	.info {
-		padding: 2px 18px;
 		position: relative;
 		flex-grow: 100;
-		.progressLabel {
-			position: absolute;
-			width: calc(100% - 36px);
-			height: 26px;
-			top: 2px;
-			left: 0;
-			text-align: center;
-			line-height: 24px;
-			color: white;
-			font-weight: bold;
-			margin-left: 18px;
-			a {
-				color: white;
-				&:hover {
-					text-decoration: underline;
-				}
-			}
-		}
 		.progressLabel.valid {
-			background-color: #00d000;
+			background-color: var(--success-500);
 			border-radius: 5px;
 		}
 		.progressLabel.invalid {
-			background-color: #A62E32;
+			background-color: var(--error-500);
 			border-radius: 5px;
 		}
 		.progressLabel.actionRequired {
-			background-color: #0081FF;
+			background-color: var(--warning-500);
 			border-radius: 5px;
 		}
 		.progress {
 			width: 100%;
 			height: 26px;
 			border-radius: 5px;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			-webkit-appearance: none;
 			&::-webkit-progress-bar {
-				background-color: #4f4f4f;
+				background-color: var(--text);
 				border-radius: 4px;
 				box-shadow: inset 0px 0px 5px #2f2f2f;
 			}
@@ -58,9 +39,6 @@
 			}
 		}
 	}
-	.spacer_box_title {
-		float: none;
-	}
 	ul {
 		li {
 			list-style: initial;
@@ -70,161 +48,133 @@
 	}
 	.options {
 		position: relative;
-		margin-bottom: 10px;
 		line-height: 18px;
 		text-align: left;
-		label {
-			input {
-				float: left;
-				margin-top: 2px;
-			}
-			span {
-				font-weight: bold;
-				margin-left: 6px;
-			}
-		}
 		select {
-			width: 300px;
-			height: 20px;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
 			option.cached {
 				font-weight: bold;
 			}
 		}
-		.releases {
-			select {
-				width: 280px;
-			}
-		}
-		.description {
-			position: relative;
-			left: 0px;
-			font-style: italic;
-			color: #818181;
-		}
 		.flash_on_connect_wrapper {
 			display: none;
 		}
-		.manual_baud_rate {
-			select {
-				width: 75px;
-				margin-left: 19px;
-			}
-		}
-	}
-	td.board-description {
-		padding: 1px 0 3px 0;
-	}
-	.helpicon {
-		margin-top: 3px;
-	}
-	.option.releases {
-		margin: 0 0 2px 0;
-		line-height: 20px;
 	}
 	.cf_table {
 		td {
-			&:last-child {
-				text-align: left;
-				padding-left: 8px;
-			}
+            height: 2rem;
 		}
 	}
+    select[name="firmware_version"], select[name="build_type"], .board-select .select2-container {
+        width: calc(100% - 2rem) !important;
+        max-width: 24rem !important;
+    }
+    .select-wrapper {
+        position: relative;
+        width: calc(100% - 2rem) !important;
+        max-width: 24rem !important;
+        display: inline-block;
+        box-sizing: border-box;
+        .select2-container {
+            width: 100% !important;
+        }
+        .detect-board {
+            position: absolute;
+            top: 0;
+            height: 1.5rem;
+            right: 1.25rem;
+            z-index: 10;
+            pointer-events: all;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .fa-search::before {
+                font-size: 11px;
+            }
+            span {
+                padding: 0 0.5rem;
+                background-color: var(--primary-500);
+                cursor: pointer;
+                color: var(--surface-50);
+                font-size: 10px;
+                border-radius: 999px;
+                transition: color 200ms, background-color 200ms;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+            &.disabled span {
+                background-color: var(--surface-500);
+                color: var(--text);
+                cursor: default;
+            }
+        }
+    }
+    .select-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
     .build_configuration {
-        .select2-selection__choice {
-            margin: auto;
-            color: #3f4241;
+        .gui_box_titlebar {
+            display: flex;
+            flex-direction: row-reverse;
+            gap: 1rem;
         }
-		input {
-			border: solid 1px var(--subtleAccent);
-			border-radius: 3px;
-			min-height: 20px;
-			padding: 2px 4px 2px 4px;
-		}
     }
     .release_info, .build_configuration {
 		display: none;
-		.title {
-			line-height: 20px;
-			text-align: center;
-			font-weight: bold;
-			color: white;
-			border-bottom: 1px solid var(--subtleAccent);
-			background-color: #3f4241;
-		}
-		.target {
-			color: blue;
-		}
-		p {
-			padding: 5px;
-			a {
-				font-weight: bold;
-				&:hover {
-					text-decoration: underline;
-				}
-			}
-		}
 	}
 	.default_btn {
-		margin: 1px 7px 0 0;
 		width: fit-content;
+        padding-top: 0.25rem;
+        padding-right: 0.25rem;
 		a {
-			padding: 0 4px 2px 4px;
-			font-size: 11px;
-		}
-	}
-	.board_support {
-		float: right;
-	}
-	.build_configuration_toggle_wrapper {
-		float: left;
-		position: absolute;
-		padding-left: 15px;
-		padding-top: 4px;
-	}
-}
-.btn {
-	.disabled {
-		cursor: default;
-		color: #fff;
-		background-color: #AFAFAF;
-		border: 1px solid #AFAFAF;
-		pointer-events: none;
-		text-shadow: none;
-		opacity: 0.5;
-	}
-}
-#dialogUnstableFirmwareAcknowledgement {
-	.content {
-		margin-top: 10px;
-		div {
-			margin-bottom: 10px;
-		}
-		ul {
-			margin-top: 5px;
-			margin-bottom: 5px;
+			padding: 0.15rem 0.5rem;
 		}
 	}
-}
-#branchInfo, #radioProtocolInfo, #telemetryProtocolInfo, #motorProtocolInfo {
-	.select2-selection__rendered {
-		line-height: 30px !important;
-	}
-	.select2-container .select2-selection--single {
-		height: 32px !important;
-	}
-	.select2-selection__arrow {
-		height: 32px !important;
-		width: 32px;
-	}
+    @media all and (max-width: 1455px) {
+        .grid-box {
+            &.col3 {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    }
+    @media all and (max-width: 991px) {
+        .grid-box {
+            &.col3 {
+                grid-template-columns: 1fr;
+            }
+            .col-span-2 {
+                grid-column: span 1;
+            }
+            .col-span-3 {
+                grid-column: span 1;
+            }
+        }
+    }
+    &+.content_toolbar {
+        width: calc(100% - 3.5rem) !important;
+    }
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col2 {
+                grid-template-columns: 1fr;
+            }
+        }
+        .detect-board {
+            span {
+                height: 18px;
+                padding: 0 1rem !important;
+                &>div {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 #customDefines {
-	width: calc(100% - 40px);
-	height: 26px;
+    width: calc(100% - 2rem)!important;
 }
-#build_configuration_toggle_label_text {
-	margin-left: 6px;
-	padding-top: 2px;
-	margin-right: 10px;
+#flash_manual_baud_rate {
+    margin-left: 0.5rem;
 }
diff --git a/src/css/tabs/gps.less b/src/css/tabs/gps.less
index 36a2bebf48..858affc97e 100644
--- a/src/css/tabs/gps.less
+++ b/src/css/tabs/gps.less
@@ -10,6 +10,7 @@
 	.GPS_signal_strength {
 		table {
 			td {
+                padding: 0.25rem;
 				&:nth-child(2) {
 					text-align: center;
 				}
@@ -27,8 +28,8 @@
 			text-align: center;
 			line-height: 20px;
 			font-weight: bold;
-			border-bottom: 1px solid var(--subtleAccent);
-			background-color: #ececec;
+			border-bottom: 1px solid var(--surface-500);
+			background-color: var(--surface-400);
 		}
 	}
 	meter {
@@ -41,44 +42,35 @@
 			text-align: center;
 			line-height: 20px;
 			font-weight: bold;
-			border-bottom: 1px solid var(--subtleAccent);
-			background-color: #ececec;
+			border-bottom: 1px solid var(--surface-500);
+			background-color: var(--surface-400);
 		}
+        tr {
+            // align every 2nd td to the right
+            td:nth-child(2n) {
+                text-align: right;
+            }
+        }
 	}
 	.gps_map {
 		height: 460px;
 	}
 	.gps_config {
 		font-size: 11px;
-		.line {
-			clear: left;
-		}
 		input {
-			float: left;
 			width: 90px;
 			height: 20px;
 			margin: 0 10px 5px 0;
 			padding-left: 5px;
 			padding-right: 5px;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-			background: var(--boxBackground);
-			color: var(--defaultText);
-		}
-		select {
-			float: left;
-			width: 100px;
-			height: 20px;
-			margin: 0 10px 5px 0;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
-			background: var(--boxBackground);
-			color: var(--defaultText);
+			background: var(--surface-200);
+			color: var(--text);
 		}
 		.select {
 			>div {
 				&:first-child {
-					float: left;
 					height: 20px;
 					margin-right: 15px;
 					margin-left: 3px;
@@ -89,7 +81,6 @@
 			line-height: 20px;
 		}
 		.gui_box {
-			float: left;
 			margin-bottom: 10px;
 		}
 		td {
@@ -100,7 +91,6 @@
 	}
 	dl.features {
 		dt {
-			float: left;
 			width: 10px;
 			height: 18px;
 			line-height: 18px;
@@ -120,16 +110,13 @@
 	}
 	.spacer_box {
 		padding-bottom: 10px;
-		float: left;
 		width: calc(100% - 20px);
 	}
 	.select {
 		margin-bottom: 5px;
-		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
-		float: left;
 		&:last-child {
 			border-bottom: none;
 			padding-bottom: 0;
@@ -156,7 +143,6 @@
 		background-size: 15%;
 		height: 100%;
 		background-repeat: no-repeat;
-		float: left;
 		width: 100%;
 		.info {
 			margin-top: 30%;
@@ -167,32 +153,31 @@
 		display: none;
 		height: 100%;
 		width: 100%;
-		float: left;
 		.map {
 			width: 100%;
-			float: left;
 			height: 400px;
 		}
 		.controls {
 			width: 100%;
-			float: left;
 			height: 33px;
 			border-bottom-left-radius: 3px;
 			border-bottom-right-radius: 3px;
 			background-color: #D1D1D1;
+            display: flex;
+            justify-content: end;
+            gap: 0.5rem;
 			button {
 				background-color: white;
 				border-radius: 4px;
-				border: 1px var(--subtleAccent) solid;
+				border: 1px var(--surface-500) solid;
 				color: grey;
 				text-align: center;
 				font-size: 20px;
 				line-height: 10px;
 				padding: 6px;
 				margin-top: 5px;
-				float: right;
 				&:hover {
-					background-color: #f5f5f5;
+					background-color: var(--surface-500);
 				}
 				&:active {
 					background-color: #e6e6e6;
@@ -214,7 +199,6 @@
 	iframe {
 		height: 400px;
 		width: 100%;
-		float: left;
 	}
 }
 meter[value] {
@@ -244,7 +228,6 @@ meter[value] {
 		iframe {
 			height: 347px;
 			width: 100%;
-			float: left;
 		}
 		.gps_map {
 			height: 403px;
@@ -263,7 +246,6 @@ meter[value] {
 		iframe {
 			height: 347px;
 			width: 100%;
-			float: left;
 		}
 		.gps_map {
 			height: 403px;
diff --git a/src/css/tabs/help.less b/src/css/tabs/help.less
index a6db695cca..e759a84ea7 100644
--- a/src/css/tabs/help.less
+++ b/src/css/tabs/help.less
@@ -7,7 +7,7 @@
 		margin-bottom: 15px;
 	}
 	li {
-		border-top: 1px dotted var(--subtleAccent);
+		border-top: 1px dotted var(--surface-500);
 		padding-top: 5px;
 		padding-bottom: 5px;
 		background-image: url(../../images/arrow.svg);
@@ -18,7 +18,7 @@
 			margin-left: 17px;
 			display: block;
 			a {
-				color: var(--accent);
+				color: var(--primary-500);
 			}
 		}
 	}
diff --git a/src/css/tabs/landing.less b/src/css/tabs/landing.less
index 24c06187a3..0e41f7e5f5 100644
--- a/src/css/tabs/landing.less
+++ b/src/css/tabs/landing.less
@@ -1,6 +1,6 @@
 .tab-landing {
 	min-height: 100%;
-	background: #fff url(../../images/pattern_light.png);
+	background: var(--surface-100) url(../../images/pattern_light.png);
 	background-size: 300px;
 	overflow: hidden;
 	.content_wrapper {
@@ -15,7 +15,7 @@
 		margin-bottom: 15px;
 	}
 	.content_mid {
-		background-color: var(--accent);
+		background-color: var(--surface-300);
 		overflow: hidden;
 		padding: 0 15px;
 		.column {
@@ -44,9 +44,9 @@
 		}
 		.text3 {
 			.wrap2 {
-				border: 1px solid var(--subtleAccent);
+				border: 1px solid var(--surface-300);
 				border-radius: 5px;
-				background: white;
+				background: var(--surface-400);
 				min-height: 187px;
 				font-size: 11px;
 			}
@@ -65,7 +65,7 @@
 		margin-right: auto;
 		margin-top: 5px;
 		width: 800px;
-		color: var(--defaultText);
+		color: var(--text);
 		font-size: 14px;
 		font-weight: 300;
 		img {
diff --git a/src/css/tabs/led_strip.less b/src/css/tabs/led_strip.less
index f1068595e4..4a21e6e572 100644
--- a/src/css/tabs/led_strip.less
+++ b/src/css/tabs/led_strip.less
@@ -10,7 +10,7 @@
 	.section {
 		color: #565656;
 		margin: 20px 0 5px 0;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 	}
 	.mainGrid {
 		width: calc((24px + 7px) * 16);
@@ -18,16 +18,16 @@
 		float: left;
 		margin-right: 10px;
 		border-radius: 3px;
-		background-color: #dcdcdc;
-		border: var(--subtleAccent);
+		background-color: var(--surface-200);
+		border: 1px solid var(--surface-500);
 		.gPoint {
 			float: left;
-			border: solid 1px var(--ledAccent);
+			border: solid 1px var(--surface-500);
 			width: 23px;
 			height: 23px;
 			margin: 3px;
 			border-radius: 7px;
-			background: var(--ledBackground);
+			background: var(--surface-300);
 			cursor: pointer;
 		}
 	}
@@ -199,14 +199,13 @@
 		margin-top: -21px;
 		width: 24px;
 		height: 24px;
-		text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black;
 		color: white;
 	}
 	button {
 		text-align: center;
 		font-weight: bold;
-		border: 1px solid var(--subtleAccent);
-		background-color: #ececec;
+		border: 1px solid var(--surface-500);
+		background-color: var(--surface-400);
 		border-radius: 3px;
 		padding: 7px 6px;
 		margin: 3px 0;
@@ -249,10 +248,10 @@
 			background: #acacac;
 		}
 		.functionSelect {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
-			background: var(--boxBackground);
-			color: var(--defaultText);
+			background: var(--surface-200);
+			color: var(--text);
 		}
 	}
 	.header {
@@ -271,10 +270,10 @@
 			margin-top: 1px;
 		}
 		.auxSelect {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
-			background: var(--boxBackground);
-			color: var(--defaultText);
+			background: var(--surface-200);
+			color: var(--text);
 		}
 		.rainbowSlidersDiv {
 			display: none;
@@ -315,7 +314,7 @@
 		display: inline-block;
 		position: absolute;
 		z-index: 10000;
-		background: var(--boxBackground);
+		background: var(--surface-200);
 		padding: 5px;
 		border-color: #565656;
 		border-style: solid;
@@ -414,7 +413,6 @@
 				border-style: solid;
 			}
 			width: 23%;
-			text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black;
 			color: white;
 		}
 		height: 130px;
@@ -432,10 +430,10 @@
 			border-color: #000;
 		}
 		.modeSelect {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
-			background: var(--boxBackground);
-			color: var(--defaultText);
+			background: var(--surface-200);
+			color: var(--text);
 		}
 	}
 	.indicators {
@@ -527,7 +525,7 @@
 		font-size: 14px;
 		div {
 			font-size: 40px;
-			color: var(--accent);
+			color: var(--primary-500);
 			margin-bottom: -5px;
 			margin-top: -10px;
 		}
@@ -544,7 +542,7 @@
 		position: absolute;
 		z-index: -1;
 		width: 496px;
-		border: 1px solid rgb(236, 236, 236);
+		border: 1px solid var(--surface-500);
 		margin-top: -1px;
 		margin-left: -1px;
 		border-radius: 3px;
@@ -552,7 +550,7 @@
 			width: 122px;
 			height: 122px;
 			float: left;
-			border: solid 1px rgb(236, 236, 236);
+		    border: 1px solid var(--surface-500);
 		}
 	}
 	.ui-selected {
diff --git a/src/css/tabs/logging.less b/src/css/tabs/logging.less
index 0712e3ec3c..4a26d9c4ef 100644
--- a/src/css/tabs/logging.less
+++ b/src/css/tabs/logging.less
@@ -22,7 +22,7 @@
 	.speed {
 		margin-top: 5px;
 		width: 80px;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		border-radius: 3px;
 	}
 	.info {
diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less
index 8b30bb50f9..eac8ac8c46 100644
--- a/src/css/tabs/motors.less
+++ b/src/css/tabs/motors.less
@@ -1,57 +1,28 @@
 .tab-motors {
+    .spacer {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .configuration {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .danger {
+        .switchery {
+            margin-right: 0.1rem;
+        }
+    }
 	.ui-grid-col {
 		margin-bottom: 0;
 	}
-	select {
-		border: 1px solid var(--subtleAccent);
-		width: fit-content;
-		height: 20px;
-		margin-right: 80px;
-		border-radius: 3px;
-		float: left;
-	}
-	table {
-		margin-bottom: 0;
-		width: 100%;
-		float: left;
-		padding: 0;
-		text-align: left;
-		border-collapse: collapse;
-		th {
-			text-align: left;
-			border-collapse: collapse;
-			padding: 3px;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		td {
-			text-align: left;
-			border-collapse: collapse;
-			padding: 5px 3px;
-			margin-right: 20px;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		tr {
-			td {
-				&:first-child {
-					text-align: left;
-					width: 55px;
-				}
-			}
-		}
-		thead {
-			tr {
-				&:first-child {
-					background-color: #ececec;
-				}
-			}
-		}
-	}
 	position: relative;
 	.groupTitle {
 		padding: 0 0 5px 0;
 		margin: 0 0 10px 0;
 		font-size: 16px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 	}
 	.mixerPreview {
 		svg {
@@ -60,24 +31,11 @@
 			margin-left: 15px;
 		}
 	}
-	#mixer.mixerList {
-		float: none;
-	}
-	.featuresMultiple {
-		border-collapse: collapse;
-		margin-bottom: 5px;
-		margin-top: -5px;
-		padding: 0;
-	}
 	dl.features {
 		dt {
-			float: left;
 			width: 10px;
 			height: 18px;
 			line-height: 18px;
-			input {
-				margin-top: 2px;
-			}
 		}
 		dd {
 			margin: 0 0 0 20px;
@@ -100,13 +58,12 @@
 		.disabled {
 			width: 48px;
 			padding: 0 5px;
-			background-color: #ececec;
+			background-color: var(--surface-400);
 		}
 		input[readonly] {
 			background-color: #AFAFAF;
 			border: none;
 			pointer-events: none;
-			text-shadow: none;
 			opacity: 0.5;
 		}
 		span {
@@ -115,9 +72,8 @@
 		margin-bottom: 5px;
 		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
-		float: left;
 		&:last-child {
 			border-bottom: none;
 			padding-bottom: 0;
@@ -125,33 +81,16 @@
 		}
 	}
 	.disarm {
-		.checkboxPwm {
-			margin-top: 2px;
-			margin-right: 5px;
-		}
 		.checkbox {
-			div {
-				margin-bottom: 0;
-				margin-top: 0;
-				input {
-					margin: 0;
-					float: left;
-				}
-			}
-			span {
-				margin-left: 0;
-			}
-			float: left;
 			padding-left: 0;
 			margin-top: -5px;
 			margin-right: 5px;
 			padding-bottom: 5px;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			width: 100%;
 		}
 		margin-bottom: 5px;
-		float: left;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
 	}
 	.freelabel {
@@ -161,11 +100,6 @@
 	span {
 		margin: 0;
 	}
-	.spacer_box {
-		padding-bottom: 10px;
-		float: left;
-		width: calc(100% - 20px);
-	}
 	.spacer_box.mixer_settings {
 		padding-bottom: 0px;
 	}
@@ -176,18 +110,15 @@
 		padding-left: 10px;
 	}
 	.disarmdelay {
-		margin-top: 5px;
-		float: left;
 		width: 100%;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 	}
 	.select {
 		margin-bottom: 5px;
 		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
-		float: left;
 		&:last-child {
 			border-bottom: none;
 			padding-bottom: 0;
@@ -198,70 +129,22 @@
 		margin-bottom: 5px;
 		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
-		float: left;
-	}
-	.gui_box_titlebar {
-		margin-bottom: 0;
-	}
-	.numberspacer {
-		float: left;
-		width: 65px;
-		height: 21px;
 	}
 	thead {
 		display: none;
 	}
-	.gui_box {
-		margin-bottom: 10px;
-		float: left;
-		span {
-			font-style: normal;
-			font-weight: normal;
-			line-height: 19px;
-			color: #4f4f4f;
-			font-size: 11px;
-		}
-	}
 	.alignicon {
 		width: 15px;
 		height: 15px;
-		float: left;
 		margin: 3px;
 	}
-	.mixer {
-		.gui_box {
-			float: left;
-		}
-	}
-	.motorstop {
-		.gui_box {
-			float: left;
-		}
-	}
 	._3dSettings {
-		margin-top: 10px;
-		float: left;
 		width: 100%;
 	}
-	._3d {
-		div {
-			margin-right: 17px;
-		}
-	}
 	.modelAndGraph {
-		float: left;
 		width: 100%;
-		margin-bottom: 0;
-	}
-	.spacer {
-		width: calc(100% - 34px);
-		margin: 10px;
-	}
-	#graph {
-		float: left;
-		width: calc(100% - 160px);
 	}
 	.btn {
 		.disabled {
@@ -270,7 +153,6 @@
 			background-color: #AFAFAF;
 			border: none;
 			pointer-events: none;
-			text-shadow: none;
 			opacity: 0.5;
 		}
 	}
@@ -336,16 +218,9 @@
 	#dialog-settings-changed-content {
 		flex-grow: 1;
 	}
-	.dialog-buttons {
-		float: right;
-		margin-bottom: -3%;
-	}
 	.plot_control {
-		float: right;
-		width: 160px;
-		height: 178px;
 		margin: 0;
-		background-color: #ECECEC;
+        background-color: transparent;
 		border-top-right-radius: 3px;
 		border-bottom-right-radius: 3px;
 		.table {
@@ -361,13 +236,12 @@
 		}
 		.motor-button {
 			a {
-				background-color: var(--accent);
+				background-color: var(--primary-500);
 				border-radius: 3px;
 				border: 1px solid #e8b423;
 				color: #000;
 				font-size: 10px;
 				line-height: 17px;
-				text-shadow: 0 1px rgba(255, 255, 255, 0.25);
 				text-transform: uppercase;
 				letter-spacing: 0.03em;
 				display: block;
@@ -390,7 +264,7 @@
 		}
 		select {
 			width: 100%;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 		}
 		.value {
@@ -412,7 +286,6 @@
 		}
 	}
 	.power_info {
-		float: left;
 		margin-left: 1em;
 		.power_text {
 			font-weight: bold;
@@ -426,11 +299,8 @@
 		}
 	}
 	svg {
-		float: left;
-		width: calc(100% - 168px);
-		height: 140px;
-		margin-top: 10px;
-		margin-bottom: 15px;
+        width: 100%;
+		height: 100%;
 	}
 	.grid {
 		.tick {
@@ -464,7 +334,7 @@
 	}
 	text {
 		stroke: none;
-		fill: #828885;
+		fill: var(--text);
 		font-size: 10px;
 	}
 	.line {
@@ -480,11 +350,7 @@
 	}
 	.motorblock {
 		margin-bottom: 0;
-		background-color: #ECECEC;
-	}
-	.left.motors {
-		float: left;
-		width: 100%;
+		background-color: var(--surface-200);
 	}
 	.title {
 		padding-bottom: 2px;
@@ -500,9 +366,6 @@
 	.titles {
 		height: 20px;
 		li {
-			float: left;
-			width: calc((100% / 9) - 10px);
-			margin-right: 10px;
 			text-align: center;
 		}
 		.active {
@@ -510,22 +373,18 @@
 		}
 	}
 	.m-block {
-		float: left;
-		width: calc((100% / 9) - 10px);
 		height: 100px;
-		margin-right: 10px;
+        width: 100%;
 		text-align: center;
-		background-color: #f4f4f4;
-		border-radius: 3px;
-		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+		background-color: var(--surface-300);
+		border-radius: 0.5rem;
 		.meter-bar {
 			position: relative;
 			width: 100%;
 			height: 100px;
-			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-			background-color: #E0E0E0;
-			border-radius: 3px;
-			border: 1px solid #F5F5F5;
+			background-color: var(--surface-300);
+			border-radius: 0.5rem;
+			border: 1px solid var(--surface-500);
 		}
 		.label {
 			position: absolute;
@@ -534,7 +393,7 @@
 			text-align: center;
 			font-weight: bold;
 			font-size: 10px;
-			color: #474747;
+			color: var(--surface-950);
 		}
 		.label.rpm_info {
 			bottom: 28px;
@@ -553,208 +412,41 @@
 		border-radius: 2px;
 	}
 	.motor_testing {
-		margin-top: 5px;
 		margin-bottom: 0;
 		padding: 0;
 		border: 0;
 		list-style: none;
 		outline: none;
-		.left {
-			width: 100%;
-		}
 		.sliders {
 			input {
 				-webkit-appearance: slider-vertical;
-				width: calc((100% / 9) - 13px);
-				height: 73px;
-				margin-left: 10px;
-				&:first-child {
-					margin-left: 0;
-				}
+				height: 6rem !important;
+                padding: 0 !important;
 			}
 		}
 		.values {
-			margin-top: 5px;
 			li {
-				&:first-child {
-					margin-left: 0;
-				}
-				float: left;
-				width: calc((100% / 9) - 10px);
-				margin-left: 10px;
 				text-align: center;
 				font-size: 10px;
 			}
 		}
 		.telemetry {
-			display: flow-root;
-			margin-bottom: 5px;
+            margin-bottom: 0.5rem;
 			.warning {
-				color: var(--error);
+				color: var(--error-500);
 			}
 			li {
-				&:first-child {
-					margin-left: 0;
-				}
-				float: left;
-				width: calc((100% / 9) - 10px);
-				margin-left: 10px;
 				text-align: center;
 				font-size: 10px;
-				white-space: pre;
-			}
-		}
-		.notice {
-			float: left;
-			padding: 5px;
-			border: 2px solid var(--subtleAccent);
-			border-radius: 3px;
-			background-color: #fff7cd;
-			font-size: 11px;
-			margin-top: 10px;
-			p {
-				margin-bottom: 10px;
-			}
-			.motorsEnableTestMode {
-				margin-left: 10px;
-			}
-		}
-	}
-	.motorDialogButtons {
-		float: right;
-	}
-}
-@media all and (max-width: 575px) {
-	.tab-motors {
-		.modelAndGraph {
-			display: flex;
-			flex-wrap: wrap;
-		}
-		.mixer {
-			.gui_box {
-				min-height: auto;
-			}
-		}
-		.motorstop {
-			.gui_box {
-				min-height: auto;
-			}
-		}
-		#graph {
-			width: 100%;
-			order: 2;
-		}
-		.plot_control {
-			order: 1;
-		}
-		.power_info {
-			order: 3;
-			width: 100%;
-			margin-top: 10px;
-		}
-		.motorblock {
-			margin-bottom: 15px;
-			>.spacer {
-				display: flex;
-				flex-wrap: wrap;
-			}
-		}
-		.left.motors {
-			width: 100%;
-			order: 1;
-		}
-		.motor_testing {
-			width: 100%;
-			display: flex;
-			flex-wrap: wrap;
-			order: 2;
-			.notice {
-				width: 100%;
-				margin-top: 15px;
-			}
-			.left {
-				width: 100%;
-			}
-			.sliders {
-				margin-left: 2px;
-				margin-right: -2px;
-				input {
-					width: calc((100% - 108px) / 9);
-				}
-			}
-			.values {
-				li {
-					width: calc((100% - 80px) / 9);
-					&:last-child {
-						margin-left: 4px;
-					}
-				}
-			}
-			.telemetry {
-				li {
-					width: calc((100% - 80px) / 9);
-				}
-				span {
-					font-size: 6px;
-				}
-			}
-		}
-		.titles {
-			li {
-				width: calc((100% - 80px) / 9);
-				&:last-child {
-					margin-right: 0;
-				}
-			}
-		}
-		.m-block {
-			width: calc((100% - 80px) / 9);
-			&:last-child {
-				margin-right: 0;
-			}
-		}
-	}
-}
-@media all and (max-width: 1055px) {
-	.tab-motors {
-		.gui_box {
-			span {
-				line-height: 17px;
-			}
-		}
-		.mixer {
-			.gui_box {
-				float: left;
-			}
-		}
-		.motorstop {
-			.gui_box {
-				float: left;
-			}
-		}
-	}
-}
-@media all and (max-width: 1600px) {
-	.tab-motors {
-		select {
-			.escprotocol {
-				margin-left: 24px;
-			}
-		}
-	}
-}
-@media all and (min-width: 1920px) {
-	.tab-motors {
-		select {
-			.escprotocol {
-				margin-left: 48px;
-			}
-			margin-right: 120px;
-		}
-		._3d {
-			div {
-				margin-right: 17px;
 			}
 		}
 	}
+
+    @media all and (max-width: 1055px) {
+        .grid-box {
+            &.col2 {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
 }
diff --git a/src/css/tabs/onboard_logging.less b/src/css/tabs/onboard_logging.less
index 3807696268..184d2738bd 100644
--- a/src/css/tabs/onboard_logging.less
+++ b/src/css/tabs/onboard_logging.less
@@ -15,7 +15,6 @@
 			font-weight: bold;
 		}
 		dt {
-			float: left;
 			width: 120px;
 			height: 20px;
 			line-height: 20px;
@@ -34,7 +33,6 @@
 	.dataflash-info {
 		overflow: hidden;
 		dt {
-			float: left;
 			width: 12em;
 			height: 20px;
 			line-height: 20px;
@@ -49,7 +47,7 @@
 	.speed {
 		margin-top: 5px;
 		width: 80px;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 	}
 	.buttons {
 		width: calc(100% - 20px);
@@ -62,8 +60,8 @@
 	.dataflash-contents {
 		margin-top: 15px;
 		margin-bottom: 26px;
-		border: 1px solid var(--subtleAccent);
-		background-color: #eee;
+		border: 1px solid var(--surface-500);
+		background-color: var(--surface-300);
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
@@ -88,8 +86,8 @@
 	.sdcard-contents {
 		margin-top: 15px;
 		margin-bottom: 26px;
-		border: 1px solid var(--subtleAccent);
-		background-color: #eee;
+		border: 1px solid var(--surface-500);
+		background-color: var(--surface-300);
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
@@ -112,11 +110,11 @@
 		}
 	}
 	.dataflash-used {
-		background-color: var(--accent);
+		background-color: var(--primary-500);
 		border-radius: 4px;
 	}
 	.sdcard-other {
-		background-color: var(--accent);
+		background-color: var(--primary-500);
 		border-radius: 4px;
 	}
 	.dataflash-free {
@@ -128,7 +126,7 @@
 	progress {
 		&::-webkit-progress-bar {
 			height: 24px;
-			background-color: #eee;
+			background-color: var(--surface-300);
 		}
 		&::-webkit-progress-value {
 			background-color: #bcf;
@@ -152,7 +150,6 @@
 		.helpicon {
 			margin: 4px 0 0 7px;
 			display: inline-block;
-			float: unset;
 		}
 	}
 	.require-msc-supported {
@@ -164,74 +161,9 @@
 	.line {
 		clear: left;
 	}
-	.blackboxRate {
-		select {
-			float: left;
-			width: 180px;
-			height: 20px;
-			margin: 0 10px 5px 0;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
-		span {
-			line-height: 20px;
-		}
-	}
-	.blackboxDebugFields {
-		margin-top: 5px;
-		select {
-			float: left;
-			width: 180px;
-			height: 20px;
-			margin: 0 10px 5px 0;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
-		span {
-			&:last-child {
-				margin-left: 7px;
-			}
-			line-height: 20px;
-		}
-	}
-	.ms-choice {
-		background-color: var(--boxBackground) !important;
-		color: var(--defaultText) !important;
-		height: 20px;
-	}
-	.blackboxDebugMode {
-		select {
-			float: left;
-			width: 180px;
-			height: 20px;
-			margin: 0 10px 5px 0;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
-		span {
-			line-height: 20px;
-		}
-	}
-	.blackboxDevice {
-		select {
-			float: left;
-			width: 180px;
-			height: 20px;
-			margin: 0 10px 5px 0;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
-		span {
-			line-height: 20px;
-		}
-	}
 	.blackboxDebugModeText {
 		margin-left: 7px !important;
 	}
-	.sdcard {
-		padding: 10px;
-		float: left;
-	}
 	.sdcard-status {
 		padding-top: 4px;
 		text-align: center;
@@ -353,7 +285,7 @@
 }
 .tab-onboard_logging.blackbox-supported {
 	.require-blackbox-supported {
-		display: block;
+		display: inherit;
 	}
 }
 .tab-onboard_logging.blackbox-maybe-supported {
@@ -402,54 +334,3 @@
 		border: 1px solid #68a7ff;
 	}
 }
-@media all and (max-width: 575px) {
-	.tab-onboard_logging {
-		dialog {
-			width: calc(100% - 2em);
-			border-radius: unset;
-		}
-		.blackboxRate {
-			select {
-				width: 120px;
-			}
-		}
-		.blackboxDebugMode {
-			select {
-				width: 120px;
-			}
-		}
-		.blackboxDevice {
-			select {
-				width: 120px;
-			}
-		}
-	}
-}
-@media only screen and (max-width: 1055px) {
-	.tab-onboard_logging {
-		table {
-			thead {
-				tr {
-					&:first-child {
-						font-size: 12px;
-						height: 22px;
-					}
-				}
-			}
-		}
-	}
-}
-@media only screen and (max-device-width: 1055px) {
-	.tab-onboard_logging {
-		table {
-			thead {
-				tr {
-					&:first-child {
-						font-size: 12px;
-						height: 22px;
-					}
-				}
-			}
-		}
-	}
-}
diff --git a/src/css/tabs/options.less b/src/css/tabs/options.less
index 6a0208ac80..87123c1810 100644
--- a/src/css/tabs/options.less
+++ b/src/css/tabs/options.less
@@ -12,9 +12,9 @@
 		grid-template-columns: fit-content(300px) 1fr;
 	}
 	select {
-		background: var(--boxBackground);
-		color: var(--defaultText);
-		border: 1px solid var(--subtleAccent);
+		background: var(--surface-200);
+		color: var(--text);
+		border: 1px solid var(--surface-500);
 		border-radius: 3px;
 		width: fit-content;
 	}
diff --git a/src/css/tabs/osd.less b/src/css/tabs/osd.less
index 98a422ea3c..2268c6fc6a 100644
--- a/src/css/tabs/osd.less
+++ b/src/css/tabs/osd.less
@@ -2,7 +2,6 @@
 	.info {
 		margin: 10px 0 0 0;
 		position: relative;
-		float: left;
 		width: 100%;
 		.progressLabel {
 			position: absolute;
@@ -14,13 +13,53 @@
 			line-height: 24px;
 			color: white;
 			font-weight: bold;
-		}
+            a {
+                color: white;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+		}
+        .progress {
+            width: 100%;
+            height: 26px;
+            border-radius: 5px;
+            border: 1px solid var(--surface-500);
+            -webkit-appearance: none;
+            &::-webkit-progress-bar {
+                background-color: var(--text);
+                border-radius: 4px;
+                box-shadow: inset 0 0 5px #2f2f2f;
+            }
+            &::-webkit-progress-value {
+                background-color: #F86008;
+                border-radius: 4px;
+            }
+        }
+        .progress.valid {
+            &::-webkit-progress-bar {
+                background-color: #56ac1d;
+                border-radius: 4px;
+            }
+            &::-webkit-progress-value {
+                background-color: #56ac1d;
+                border-radius: 4px;
+            }
+        }
+        .progress.invalid {
+            &::-webkit-progress-bar {
+                background-color: #A62E32;
+                border-radius: 4px;
+            }
+            &::-webkit-progress-value {
+                background-color: #A62E32;
+                border-radius: 4px;
+            }
+        }
 	}
 	.spacer_box_title {
-		float: none;
-		font-weight: normal;
 		.profileOsdHeader {
-			padding: 6px;
+			padding: 0 6px;
 		}
 	}
 	ul {
@@ -36,7 +75,6 @@
 		text-align: left;
 		label {
 			input {
-				float: left;
 				margin-top: 2px;
 			}
 			span {
@@ -47,7 +85,7 @@
 		select {
 			width: 300px;
 			height: 20px;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 		}
 		.releases {
 			select {
@@ -91,7 +129,7 @@
 			text-align: center;
 			font-weight: bold;
 			color: white;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			background-color: #3f4241;
 		}
 		.target {
@@ -117,7 +155,6 @@
 			background-color: #AFAFAF;
 			border: none;
 			pointer-events: none;
-			text-shadow: none;
 			opacity: 0.5;
 		}
 	}
@@ -131,7 +168,7 @@
 		}
 		input.position {
 			width: 5em;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 		}
 	}
 	.hide {
@@ -143,27 +180,19 @@
 	.col {
 		display: inline-block;
 	}
-	.left {
-		float: left;
-	}
-	.right {
-		float: right;
-		margin-top: -7px;
-	}
-	.preview {
+	.preview-parent {
 		position: sticky;
-		top: 0;
+		top: 1.5rem;
 
 		/* please don't copy the generic background image from another project
 		* and replace the one that @nathantsoi took :)
 		*/
-		background: url(../../images/osd-bg-1.jpg);
-		background-size: cover;
-		background-repeat: no-repeat;
+        .preview {
+            background: url(../../images/osd-bg-1.jpg);
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
 		.gui_box_titlebar {
-			position: relative;
-			margin-bottom: 0px;
-			float: none;
 			label {
 				max-width: 100px;
 				overflow: hidden;
@@ -172,13 +201,6 @@
 				white-space: nowrap;
 				vertical-align: text-bottom;
 			}
-			select {
-				max-width: 100px;
-				border-radius: 3px;
-				font-size: 11px;
-				font-weight: normal;
-				font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
-			}
 		}
 		.gui_box_bottombar {
 			text-align: center;
@@ -246,29 +268,21 @@
 	.char-label.mouseover {
 		background: rgba(255,255,255,0.4);
 	}
-	.switch-all-elements {
-		float: right;
-	}
-	.content_wrapper {
-		height: calc(100% - 70px);
-	}
-	.content_toolbar {
-		text-align: right;
-		button {
-			margin-right: 1em;
-		}
-	}
+    .osd-feature {
+        .gui_box_titlebar {
+            left: 0;
+        }
+    }
 	.switchable-field {
 		padding: 3px;
 		border: 1px solid transparent;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		input {
 			border-radius: 3px;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			padding: 2px;
 		}
 		input[type=number] {
-			float: right;
 			display: none;
 			line-height: 23px;
 			height: 23px;
@@ -283,23 +297,25 @@
 		}
 	}
 	.switchable-field.mouseover {
-		background: var(--boxBackground);
-		border: 1px solid var(--subtleAccent);
+		background: var(--surface-200);
+		border: 1px solid var(--surface-500);
 		font-weight: 800;
 	}
 	.switchable-fields {
-		float: left;
 		margin-top: 5px;
 		margin-bottom: 8px;
 		width: 100%;
 	}
 	.switchable-field-flex {
 		display: flex;
+        gap: 0.5rem;
+        align-items: center;
 		.switchable-field-description {
 			display: flex;
 			flex-direction: row;
 			min-width: 0;
 			justify-content: space-between;
+            align-items: center;
 			width: 100%;
 			flex-wrap: wrap;
 			.osd-variant {
@@ -308,18 +324,18 @@
 		}
 	}
 	input {
-		background: var(--boxBackground);
-		color: var(--defaultText);
-		border: 1px solid var(--subtleAccent);
+		background: var(--surface-200);
+		color: var(--text);
+		border: 1px solid var(--surface-500);
 		border-radius: 3px;
 	}
 	input[type="radio"]:disabled {
 		cursor: not-allowed;
 	}
 	select {
-		background: var(--boxBackground);
-		color: var(--defaultText);
-		border: 1px solid var(--subtleAccent);
+		background: var(--surface-200);
+		color: var(--text);
+		border: 1px solid var(--surface-500);
 		border-radius: 3px;
 	}
 	select.osd-variant {
@@ -330,7 +346,7 @@
 		label {
 			display: block;
 			width: 100%;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			margin-top: 5px;
 			padding-bottom: 5px;
 			&:last-child {
@@ -350,216 +366,120 @@
 			font-weight: normal;
 		}
 	}
-	.grid-row {
-		justify-content: flex-start;
-		gap: 7px;
-		.elements {
-			flex: 1 1 auto;
-			width: 210px;
-			max-width: 700px;
-		}
-		.osd-preview {
-			flex: 2 0 auto;
-			max-width: 1480px;
-		}
-		.osd-profile {
-			flex: 1 1 auto;
-			width: 230px;
-			max-width: 700px;
-		}
-	}
 	.grid-col {
 		margin: 0px;
 	}
-}
-.info {
-	.progressLabel {
-		color: white;
-		a {
-			color: white;
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
-	.progress {
-		width: 100%;
-		height: 26px;
-		border-radius: 5px;
-		border: 1px solid var(--subtleAccent);
-		-webkit-appearance: none;
-		&::-webkit-progress-bar {
-			background-color: #4f4f4f;
-			border-radius: 4px;
-			box-shadow: inset 0 0 5px #2f2f2f;
-		}
-		&::-webkit-progress-value {
-			background-color: #F86008;
-			border-radius: 4px;
-		}
-	}
-	.progress.valid {
-		&::-webkit-progress-bar {
-			background-color: #56ac1d;
-			border-radius: 4px;
-		}
-		&::-webkit-progress-value {
-			background-color: #56ac1d;
-			border-radius: 4px;
-		}
-	}
-	.progress.invalid {
-		&::-webkit-progress-bar {
-			background-color: #A62E32;
-			border-radius: 4px;
-		}
-		&::-webkit-progress-value {
-			background-color: #A62E32;
-			border-radius: 4px;
-		}
-	}
-}
-#font-logo-preview-container {
-	background: rgba(0, 255, 0, 0.4);
-	margin-bottom: 10px;
-	box-sizing: border-box;
-}
-#font-logo-preview {
-	background: rgba(0, 255, 0, 1);
-	line-height: 0;
-	margin: auto;
-}
-#font-logo-info {
-	font-size: 125%;
-	line-height: 150%;
-	h3 {
-		margin-bottom: 0.2em;
-	}
-	ul {
-		li {
-			&:before {
-				content: '\2022\20';
-			}
-		}
-		li.valid {
-			color: #00a011;
-			&:before {
-				content: '\2714\20';
-			}
-		}
-		li.invalid {
-			color: #a01100;
-			&:before {
-				content: '\2715\20';
-			}
-		}
-	}
-	#font-logo-info-upload-hint {
-		margin-top: 1em;
-		display: none;
-	}
-}
-button {
-	padding: 4px 10px !important;
-	font-weight: 600;
-	font-size: 9pt !important;
-	cursor: pointer;
-}
-.fontpresets_wrapper {
-	display: inline-block;
-	position: absolute;
-	right: 1.2em;
-	top: .8em;
-}
-.fontpresets {
-	background: var(--boxBackground);
-	color: var(--defaultText);
-	border: 1px solid var(--subtleAccent);
-	border-radius: 3px;
-}
-.spacer_box_title {
-	span {
-		font-size: 11px;
-		font-weight: normal;
-	}
-}
-.spacer_box {
-	div {
-		input {
-			margin-right: 5px;
-		}
-		label {
-			margin-right: 10px;
-		}
-	}
-}
-.timer-option {
-	float: none !important;
-	padding: 2px;
-	display: inline !important;
-}
-.timers-container {
-	.timer-detail {
-		padding-left: 15px;
-		padding-top: 3px;
-		padding-bottom: 3px;
-	}
-	label {
-		margin-right: 5px !important;
-		display: inline-block;
-		width: 80px;
-	}
-	input {
-		width: 150px;
-	}
-	select {
-		width: 150px;
-	}
-}
-@media all and (max-width: 1455px) {
-	.tab-osd {
-		.osd-preview {
-			order: 1;
-			min-width: 100%;
-		}
-		.osd-feature {
-			order: 2;
-		}
-		.osd-profile {
-			order: 3;
-		}
-	}
-}
-@media all and (max-width: 575px) {
-	.tab-osd {
-		.osd-preview {
-			min-width: 100%;
-			order: 1;
-			width: fit-content;
-		}
-		.osd-feature {
-			order: 2;
-			max-width: 100%;
-		}
-		.osd-profile {
-			order: 3;
-			max-width: 100%;
-		}
-	}
-	#fontmanagercontent {
-		max-width: 100%;
-		.grid-row {
-			margin-bottom: 15px;
-		}
-	}
-	.content_wrapper.font-preview {
-		padding: 15px 0;
-	}
-	.fontpresets_wrapper {
-		display: block;
-		position: relative;
-		right: 0;
-		top: 0;
-		margin-bottom: 15px;
-	}
+    #font-logo-preview-container {
+        background: rgba(0, 255, 0, 0.4);
+        margin-bottom: 10px;
+        box-sizing: border-box;
+    }
+    #font-logo-preview {
+        background: rgba(0, 255, 0, 1);
+        line-height: 0;
+        margin: auto;
+    }
+    #font-logo-info {
+        font-size: 125%;
+        line-height: 150%;
+        h3 {
+            margin-bottom: 0.2em;
+        }
+        ul {
+            li {
+                &:before {
+                    content: '\2022\20';
+                }
+            }
+            li.valid {
+                color: #00a011;
+                &:before {
+                    content: '\2714\20';
+                }
+            }
+            li.invalid {
+                color: #a01100;
+                &:before {
+                    content: '\2715\20';
+                }
+            }
+        }
+        #font-logo-info-upload-hint {
+            margin-top: 1em;
+            display: none;
+        }
+    }
+    button {
+        padding: 4px 10px !important;
+        font-weight: 600;
+        font-size: 9pt !important;
+        cursor: pointer;
+    }
+    .fontpresets_wrapper {
+        display: inline-block;
+        position: absolute;
+        right: 1.2em;
+        top: .8em;
+    }
+    .fontpresets {
+        background: var(--surface-200);
+        color: var(--text);
+        border: 1px solid var(--surface-500);
+        border-radius: 3px;
+    }
+    .spacer_box {
+        div {
+            label {
+                margin-right: 10px;
+            }
+        }
+    }
+    .timer-option {
+        padding: 2px;
+        display: inline !important;
+    }
+    .timers-container {
+        .timer-detail {
+            padding-left: 15px;
+            padding-top: 3px;
+            padding-bottom: 3px;
+        }
+        label {
+            margin-right: 5px !important;
+            display: inline-block;
+            width: 80px;
+        }
+        input {
+            width: 150px;
+        }
+        select {
+            width: 150px;
+        }
+    }
+    @media all and (max-width: 1455px) {
+        .grid-box {
+            .col-span-2 {
+                grid-column: span 4;
+                grid-row-start: 1;
+                grid-row-end: 1;
+            }
+            .col-span-1 {
+                grid-column: span 2;
+            }
+        }
+    }
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col4 {
+                grid-template-columns: 1fr;
+                .col-span-2 {
+                    grid-column: span 1;
+                }
+                .col-span-1 {
+                    grid-column: span 1;
+                }
+            }
+        }
+    }
+
 }
diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less
index 916b22806c..fd141f7164 100644
--- a/src/css/tabs/pid_tuning.less
+++ b/src/css/tabs/pid_tuning.less
@@ -1,16 +1,16 @@
 .tab-pid_tuning {
 	.cf {
 		tr {
-			background-color: #DEDEDE;
+			background-color: var(--surface-400);
 		}
 		th {
-			border-right: solid 1px var(--subtleAccent);
+			border-right: solid 1px var(--surface-500);
 			height: 19px;
 			font-weight: normal;
 			padding: 4px;
-			color: white;
+			color: var(--text);
 			text-align: left;
-			background: var(--quietHeader);
+			background: var(--surface-300);
 			&:first-child {
 				border-top-left-radius: 3px;
 			}
@@ -32,13 +32,13 @@
 		input {
 			margin: 4px;
 			width: calc(100% - 10px);
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 		}
 		select {
 			margin: 4px;
 			width: calc(100% - 10px);
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 		}
 		.throttleCurvePreview {
 			padding: 0;
@@ -75,14 +75,14 @@
 		width: 100%;
 		table-layout: fixed;
 		padding: 1px;
-		border-bottom: 0 solid var(--subtleAccent);
+		border-bottom: 0 solid var(--surface-500);
 		.inputBackground {
 			background: white;
 		}
 		td {
-			border-bottom: 0 solid var(--subtleAccent);
+			border-bottom: 0 solid var(--surface-500);
 			padding: 1px 1px 1px 5px;
-			border-right: 1px solid var(--subtleAccent);
+			border-right: 1px solid var(--surface-500);
 		}
 		th {
 			padding: 0;
@@ -99,7 +99,7 @@
 					padding-left: 5px;
 				}
 				&:last-child {
-					border-right: 0 solid var(--subtleAccent);
+					border-right: 0 solid var(--surface-500);
 				}
 				text-align: left;
 				padding-left: 5px;
@@ -118,13 +118,13 @@
 			height: 20px;
 			line-height: 20px;
 			text-align: right;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 		}
 		select {
 			text-align-last: right;
 			border-radius: 3px;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 		}
 	}
 	.gui_box {
@@ -175,14 +175,14 @@
 	}
 	.sliderDivider {
 		padding: 3px;
-		border-top: 1px solid var(--subtleAccent);
-		border-bottom: 1px solid var(--subtleAccent);
+		border-top: 1px solid var(--surface-500);
+		border-bottom: 1px solid var(--surface-500);
 	}
 	.pid_titlebar {
 		th {
 			padding: 5px;
 			text-align: center;
-			border-right: 1px solid var(--subtleAccent);
+			border-right: 1px solid var(--surface-500);
 			&:first-child {
 				text-align: left;
 				border-top-left-radius: 3px;
@@ -193,7 +193,7 @@
 			}
 		}
 		color: #fff;
-		background-color: var(--quietHeader);
+		background-color: var(--surface-300);
 		border-top-left-radius: 3px;
 		border-top-right-radius: 3px;
 		height: 20px;
@@ -234,7 +234,7 @@
 	table.compensation {
 		tr {
 			height: 30px;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			&:last-child {
 				border-bottom: none;
 			}
@@ -318,7 +318,7 @@
 		}
 	}
 	.tab-container {
-		border-bottom: 3px solid var(--accent);
+		border-bottom: 3px solid var(--primary-500);
 		border-right-width: 0;
 		display: flex;
 		flex-direction: row;
@@ -326,9 +326,9 @@
 		justify-content: start;
 		width: 100%;
 		>div {
-			background-color: #2e2e2e;
+			background-color: var(--surface-200);
 			padding: 6px 12px;
-			border-right: 1px solid white;
+			border-right: 1px solid var(--surface-500);
 			box-sizing: border-box;
 			text-align: center;
 			&:first-child {
@@ -339,15 +339,15 @@
 			}
 			a {
 				display: block;
-				color: #999999;
+				color: var(--text);
 			}
 		}
 		>div.active {
-			background-color: var(--accent);
+			background-color: var(--primary-500);
 			color: #000;
 			transition: none;
 			a {
-				background-color: var(--accent);
+				background-color: var(--primary-500);
 				color: #000;
 				transition: none;
 			}
@@ -359,9 +359,9 @@
 		margin-right: 5px;
 		.head {
 			text-align: left;
-			border-bottom: 1px solid var(--subtleAccent);
-			background-color: var(--quietHeader);
-			color: var(--quietText);
+			border-bottom: 1px solid var(--surface-500);
+			background-color: var(--surface-300);
+			color: var(--text);
 			height: 19px;
 			font-weight: normal;
 			padding: 2px 2px 2px 6px;
@@ -408,7 +408,7 @@
 		margin-bottom: 5px;
 		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
 		float: left;
 		&:last-child {
@@ -421,7 +421,7 @@
 			height: 20px;
 			line-height: 20px;
 			text-align: left;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 			margin-right: 11px;
 			font-weight: normal;
@@ -483,20 +483,20 @@
 	.bottomarea {
 		float: left;
 		width: calc(100% - 2px);
-		border-bottom: 1px solid var(--subtleAccent);
-		border-left: 1px solid var(--subtleAccent);
-		border-right: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
+		border-left: 1px solid var(--surface-500);
+		border-right: 1px solid var(--surface-500);
 		border-bottom-right-radius: 3px;
 		border-bottom-left-radius: 3px;
 		padding-top: 5px;
 		padding-bottom: 5px;
-		background-color: #f9f9f9;
+		background-color: var(--surface-200);
 		height: 20px;
 	}
 	.profile {
 		min-width: 130px;
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 			margin-left: 5px;
 			margin-right: 5px;
@@ -506,7 +506,7 @@
 	.rate_profile {
 		min-width: 130px;
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 			margin-left: 5px;
 			margin-right: 5px;
@@ -516,7 +516,7 @@
 	.controller {
 		width: 150px;
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			margin-left: 5px;
 			width: calc(100% - 10px);
 		}
@@ -524,7 +524,7 @@
 	.delta {
 		width: 150px;
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			margin-left: 5px;
 			width: calc(100% - 10px);
 		}
@@ -565,7 +565,7 @@
 		}
 		tr {
 			width: 100%;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			padding: 0;
 		}
 	}
@@ -598,7 +598,7 @@
 			margin-bottom: 0.5em;
 		}
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			margin-left: 5px;
 			width: 120px;
 		}
@@ -612,15 +612,15 @@
 		opacity: 0.8;
 		transition: opacity .2s;
 		margin: 7px;
-		background: var(--boxBackground);
+		background: var(--surface-200);
 		&:hover {
 			opacity: 1;
 		}
 		&::-webkit-slider-runnable-track {
 			-webkit-appearance: none;
-			border: solid 1px var(--subtleAccent);
+			border: solid 1px var(--surface-500);
 			border-radius: 4px;
-			background: linear-gradient(90deg, rgb(197, 197, 197) 0%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 100%);
+			background: linear-gradient(90deg, var(--surface-300) 0%, var(--surface-400) 50%, var(--error-500) 100%);
 			height: 15px;
 		}
 		&::-webkit-slider-thumb {
@@ -629,7 +629,7 @@
 			height: 23px;
 			border-radius: 50%;
 			background: #ffbb2a;
-			border: solid 1px #828885;
+			border: solid 1px var(--surface-300);
 			cursor: pointer;
 			position: relative;
 			bottom: 5px;
@@ -639,7 +639,7 @@
 	.nonExpertModeSliders {
 		.tuningSlider {
 			&::-webkit-slider-runnable-track {
-				background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 150%);
+				background: linear-gradient(90deg, var(--surface-300) 0%, var(--surface-400) 50%, var(--error-500) 100%);
 				background-size: 55%;
 				background-position: 44%;
 				background-repeat: no-repeat;
@@ -649,7 +649,7 @@
 	.disabledSliders {
 		.tuningSlider {
 			&::-webkit-slider-runnable-track {
-				background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(197, 197, 197) 150%);
+				background: linear-gradient(90deg, var(--surface-300) -50%, var(--surface-400) 50%, var(--surface-300) 150%);
 				background-repeat: no-repeat;
 			}
 			&::-webkit-slider-thumb {
@@ -658,7 +658,7 @@
 				height: 23px;
 				border-radius: 50%;
 				background: transparent;
-				border: solid 1px #828885;
+				border: solid 1px var(--surface-300);
 				cursor: pointer;
 				position: relative;
 				bottom: 5px;
@@ -668,7 +668,7 @@
 	}
 	.sliderLabels {
 		tr {
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			&:last-child {
 				border-bottom: none;
 			}
@@ -687,7 +687,7 @@
 			}
 		}
 		span {
-			color: black;
+			color: var(--text);
 			font-size: 12px;
 		}
 	}
@@ -825,7 +825,7 @@
 	background-color: #D6D6D6;
 	padding-top: 8px;
 	font-size: 12px;
-	border-bottom: 1px solid var(--subtleAccent);
+	border-bottom: 1px solid var(--surface-500);
 	color: #828282;
 	background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
 	th {
@@ -837,15 +837,15 @@
 .pid_mode {
 	width: calc(100% - 5px);
 	height: 18px;
-	background-color: #D6D6D6;
+	background-color: var(--surface-400);
 	float: left;
 	margin: 0;
 	text-align: left;
 	line-height: 13px;
 	padding: 5px 0 0 5px;
 	font-size: 12px;
-	border-bottom: 1px solid var(--subtleAccent);
-	color: #828282;
+	border-bottom: 1px solid var(--surface-500);
+	color: var(--text);
 	font-weight: normal;
 	background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
 	>div {
@@ -895,11 +895,11 @@
 	width: calc(100% - 22px);
 	position: relative;
 	padding: 10px;
-	border: 1px solid var(--subtleAccent);
+	border: 1px solid var(--surface-500);
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-	border-top: 0 solid var(--subtleAccent);
-	background: #f9f9f9;
+	border-top: 0 solid var(--surface-500);
+	background: var(--surface-200);
 }
 @media all and (max-width: 575px) {
 	.tab-pid_tuning {
@@ -976,7 +976,7 @@
 			background-color: #D6D6D6;
 			line-height: 13px;
 			font-size: 12px;
-			border-bottom: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
 			color: #828282;
 			font-weight: normal;
 			background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
diff --git a/src/css/tabs/ports.less b/src/css/tabs/ports.less
index 055e0cef2f..6c72c55f74 100644
--- a/src/css/tabs/ports.less
+++ b/src/css/tabs/ports.less
@@ -1,102 +1,67 @@
 .tab-ports {
-	position: relative;
+    height: 100%;
 	table {
-		margin-bottom: 10px;
-		width: 100%;
 		border-collapse: collapse;
 		border-left: 0;
 		border-right: 0;
 		border-top: 0;
-		th {
-			border-left: 0;
-			border-right: 0;
-			border-top: 0;
-		}
 		td {
-			border-top: 0;
-			border-bottom: 1px solid var(--subtleAccent);
-			border-left: 1px solid var(--subtleAccent);
-			border-right: 1px solid var(--subtleAccent);
-			padding: 3px 3px 3px 5px;
+			padding: 0.25rem;
+			text-align: center;
+            &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors {
+                select {
+                    margin-left: 0.5rem;
+                }
+            }
 		}
 		tr {
 			td {
+                padding: 0.5rem 0;
+				background-color: var(--surface-200);
 				&:first-child {
 					text-align: left;
+                    padding-left: 1rem
 				}
 			}
 			&:nth-child(even) {
 				select {
-					background-color: var(--alternativeBackground);
+					background-color: var(--surface-300);
 				}
-				background-color: var(--alternativeBackground);
 			}
 		}
-		thead {
-			tr {
-				&:first-child {
-					background-color: var(--alternativeBackground);
-					font-size: 12px;
-					height: 25px;
-					border-top: 0;
-					border-right: 0;
-					border-left: 0;
-				}
-			}
-		}
-	}
-	.function {
-		input {
-			vertical-align: -2px;
-		}
-		label {
-			margin-right: 5px;
-		}
-	}
-	select {
-		border: 1px solid var(--subtleAccent);
-		border-radius: 3px;
-		margin-right: 3px;
-		background: var(--boxBackground);
-		color: var(--defaultText);
-	}
-	.require-support {
-		display: none;
-	}
-	.require-upgrade {
-		display: block;
-	}
-	.ports {
-		select {
-			margin-top: 5px;
-			margin-bottom: 5px;
-		}
 		select[name=function-peripherals] {
-			max-width: 110px;
+			max-width: 12rem;
 		}
 		select[name=function-telemetry] {
-			max-width: 110px;
-		}
-		td {
-			text-align: center;
+			max-width: 10rem;
 		}
 		thead {
 			td {
-				white-space: nowrap;
-				padding: 5px 7px;
-				background-color: var(--quietHeader);
-				color: var(--quietText);
+				padding: 0.5rem;
+				background-color: var(--surface-300);
+				color: var(--text);
 				&:first-child {
-					text-align: left;
-					border-top-left-radius: 5px;
-					border-left: 0;
+					border-top-left-radius: 0.75rem;
 				}
 				&:last-child {
-					border-top-right-radius: 5px;
-					border-right: 0;
+					border-top-right-radius: 0.75rem;
 				}
 			}
 		}
+        tbody {
+            // first and last td of last tr
+            tr:last-child td:first-child {
+                border-bottom-left-radius: 0.75rem;
+            }
+            tr:last-child td:last-child {
+                border-bottom-right-radius: 0.75rem;
+            }
+            td {
+				*:first-child {
+					margin-bottom: 0.25rem;
+				}
+            }
+        }
 	}
 }
 #tab-ports-templates {
@@ -159,32 +124,54 @@
 				border-radius: unset;
 			}
 			select[name=function-peripherals] {
-				border-bottom: 1px solid var(--subtleAccent);
+				border-bottom: 1px solid var(--surface-500);
 			}
 			select[name=function-telemetry] {
-				border-bottom: 1px solid var(--subtleAccent);
+				border-bottom: 1px solid var(--surface-500);
 			}
 			select[name=function-sensors] {
-				border-bottom: 1px solid var(--subtleAccent);
+				border-bottom: 1px solid var(--surface-500);
 			}
 			thead {
 				td {
-					font-size: 8px;
-					width: calc(100% / 5);
+                    font-size: 10px;
+					width: fit-content;
+                    padding: 0.5rem;
 					word-break: break-word;
 					white-space: unset;
 				}
 			}
+            tbody {
+                td {
+                    padding: 0.25rem 0.5rem;
+                    .switchery-default {
+                        margin-bottom: 0.5rem;
+                    }
+                    &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors {
+                        select {
+                            margin-left: 0rem;
+                        }
+                    }
+                }
+                // alternate row and its identifier background color
+                tr:nth-child(4n) {
+                    td {
+                        background-color: var(--surface-300);
+                    }
+                }
+                tr:nth-child(4n + 1) {
+                    td {
+                        background-color: var(--surface-200);
+                    }
+                }
+            }
 		}
 		.portIdentifier {
 			td {
-				height: 18px;
-				background-color: #D6D6D6;
-				padding: 2px 5px;
 				font-size: 12px;
-				color: #828282;
+				color: var(--text);
 				font-weight: normal;
-				background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
+                background-color: var(--surface-300);
 			}
 		}
 	}
diff --git a/src/css/tabs/power.less b/src/css/tabs/power.less
index 85c9a13eb9..4bc4d00b37 100644
--- a/src/css/tabs/power.less
+++ b/src/css/tabs/power.less
@@ -2,78 +2,38 @@
 	display: none;
 }
 .tab-power {
-	.ui-grid-col {
-		margin-bottom: 0;
-	}
-	td.configuration {
-		padding-top: 5px;
-		text-align: left;
-	}
 	.battery-state {
 		.configuration {
 			border-bottom: 0;
 		}
 	}
-	td.value {
-		text-align: left;
-		width: 20%;
-	}
 	.label {
 		width: 25%;
 	}
-	.number {
-		input {
-			width: 50px;
-			padding-left: 3px;
-			height: 20px;
-			line-height: 20px;
-			text-align: left;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-			margin-right: 11px;
-			font-size: 12px;
-			font-weight: normal;
-		}
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-		float: left;
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-		}
-	}
 	.select {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		margin-bottom: 0.5rem;
+        padding-bottom: 0.5rem;
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
-		float: left;
 		&:last-child {
 			border-bottom: none;
 			padding-bottom: 0;
 			margin-bottom: 0;
 		}
 	}
-	.battery-configuration {
-		select {
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-			margin-right: 5px;
-			float: left;
-			width: 150px;
-		}
-	}
 	.require-support {
 		display: none;
 	}
 	.require-upgrade {
 		display: block;
 	}
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col2 {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
 }
 .tab-power.supported {
 	.require-support {
diff --git a/src/css/tabs/receiver.less b/src/css/tabs/receiver.less
index fbe635b415..6cfc2e6769 100644
--- a/src/css/tabs/receiver.less
+++ b/src/css/tabs/receiver.less
@@ -1,25 +1,12 @@
 .tab-receiver {
-	font-weight: normal;
-	.graphAndLabel {
-		float: left;
-		width: 100%;
-		margin-bottom: 0;
-	}
-	.spacer {
-		padding-left: 10px;
-		padding-right: 10px;
-		width: calc(100% - 10px);
-	}
-	input[type="number"] {
-		&::-webkit-inner-spin-button {
-			border: 0;
-		}
-	}
 	.bars {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
 		font-weight: bold;
 		ul {
-			margin-bottom: 5px;
-			clear: left;
+            display: flex;
+            gap: 0.5rem;
 			&:nth-of-type(1) {
 				.fill {
 					background-color: #f1453d;
@@ -101,217 +88,69 @@
 				}
 			}
 		}
-		li {
-			float: left;
-			height: 22px;
-			line-height: 20px;
-			white-space: nowrap;
-		}
-		.name {
-			padding: 0 10px 0 0;
-			width: 60px;
-			text-align: right;
-		}
+        .name {
+            width: 5rem;
+            text-align: right;
+        }
 		.meter {
-			width: calc(100% - 70px);
+			width: 100%;
 		}
 		.meter-bar {
 			position: relative;
-			margin-top: 2px;
-			width: calc(100% - 2px);
-			height: 15px;
-			border: 1px solid var(--subtleAccent);
-			background-color: #f4f4f4;
-			border-radius: 3px;
+			width: 100%;
+			height: 1rem;
+			border: 1px solid var(--surface-500);
+			background-color: var(--surface-200);
+			border-radius: 0.3rem;
 			.label {
 				position: absolute;
 				width: 50px;
-				height: 15px;
-				line-height: 15px;
 				text-align: center;
-				color: #474747;
+				color: var(--text);
 			}
 			.fill {
 				position: relative;
 				overflow: hidden;
-				border-radius: 2px;
+				border-radius: 0.3rem;
 				width: 50%;
-				height: 15px;
-				background-color: green;
+				height: 1rem;
+				background-color: var(--primary-500);
 				.label {
 					color: white;
 				}
 			}
 		}
 	}
-	.tunings {
-		float: right;
-		position: relative;
-		margin: 0 0 10px 0;
-		width: 100%;
-		border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
-		.head {
-			height: 15px;
-			text-align: left;
-			padding: 4px 4px 4px 6px;
-			font-weight: normal;
-			background: #828885;
-			color: white;
-			border-top-left-radius: 3px;
-			border-right: 1px solid var(--subtleAccent);
-		}
-		table {
-			width: 100%;
-			border-collapse: collapse;
-			text-align: left;
-			padding: 4px 4px 4px 6px;
-			th {
-				text-align: left;
-				padding: 4px 4px 4px 6px;
-				background: var(--quietHeader);
-				color: var(--quietText);
-				border-right: 1px solid var(--subtleAccent);
-				font-weight: normal;
-				&:first-child {
-					border-top-left-radius: 3px;
-				}
-				&:last-child {
-					border-top-right-radius: 3px;
-					border-right: 0;
-				}
-			}
-			td {
-				text-align: left;
-				border-right: 1px solid var(--subtleAccent);
-				padding: 1px;
-				&:first-child {
-					border-bottom-left-radius: 3px;
-				}
-				&:last-child {
-					border-bottom-right-radius: 3px;
-					border-right: 0;
-				}
-			}
-			input {
-				width: calc(100% - 8px);
-				border: 1px solid var(--subtleAccent);
-				border-radius: 3px;
-				height: 22px;
-				margin: 4px;
-				line-height: 22px;
-				text-align: right;
-				box-sizing: border-box;
-			}
-		}
-		.sticks {
-			th {
-				width: 33%;
-			}
-		}
-		.deadband {
-			th {
-				width: 33%;
-			}
-		}
-	}
-	.input-helpicon-flex {
-		display: flex;
-		flex-flow: row nowrap;
-		.helpicon {
-			min-width: 14px;
-			margin-left: 4px;
-		}
-	}
-	.rssi_channel_wrapper {
-		float: right;
-		margin: 0 0 10px 0;
-		border-left: 0;
-		width: 30%;
-		box-sizing: border-box;
-		border-top-right-radius: 5px;
-		border-bottom-right-radius: 5px;
-		border-right: 1px solid var(--subtleAccent);
-		border-bottom: 1px solid var(--subtleAccent);
-		.head {
-			height: 15px;
-			padding: 4px;
-			text-align: left;
-			font-weight: normal;
-			background: var(--quietHeader);
-			color: var(--quietText);
-			border-top-right-radius: 3px;
-		}
-		select {
-			width: calc(100% - 10px);
-		}
-	}
-	.rcmap_wrapper {
-		float: right;
-		position: relative;
-		margin: 0 0 10px 0;
-		width: 70%;
-		box-sizing: border-box;
-		border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
-		border-left: 1px solid var(--subtleAccent);
-		border-bottom: 1px solid var(--subtleAccent);
-		.head {
-			height: 15px;
-			padding: 4px;
-			text-align: left;
-			font-weight: normal;
-			background: var(--quietHeader);
-			color: var(--quietText);
-			border-right: 1px solid var(--subtleAccent);
-			border-top-left-radius: 3px;
-			padding-left: 6px;
-		}
-	}
-	.hybrid_element {
-		border-right: 1px solid var(--subtleAccent);
+    .sticks {
+        th {
+            width: 33%;
+        }
+    }
+    .deadband {
+        th {
+            width: 33%;
+        }
+    }
+    .hybrid_element {
+        position: relative;
+        width: 11rem;
 		select {
-			height: 22px;
-			z-index: 1;
-			margin: 4px;
-			width: calc(100% - 10px);
+			z-index: 3;
+			position: absolute;
+            border: none !important;
+            height: 1.45rem;
+            min-width: 0 !important;
+            width: 1rem;
+            inset: 0;
+            left: calc(100% - 1.25rem);
+            top: 1px;
 		}
 		input {
-			position: absolute;
-			padding-left: 5px;
-			width: calc(100% - 36px);
-			height: 20px;
 			z-index: 2;
-			border: 1px solid var(--subtleAccent);
-			margin: 4px;
-			border-radius: 3px 0 0 3px;
 		}
 	}
-	select {
-		height: 22px;
-		padding-left: 5px;
-		border: 1px solid var(--subtleAccent);
-		border-radius: 3px;
-		margin: 4px;
-	}
-	.rc-smoothing-type {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		width: 100%;
-	}
-	.rc-smoothing-channels {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-	}
 	.rcSmoothing {
 		table {
-			td {
-				border-right: none;
-			}
 			select {
 				width: 90%;
 			}
@@ -325,7 +164,7 @@
 		td {
 			&:first-child {
 				width: 120px;
-				padding-left: 8px;
+				padding: 0.5rem 0;
 			}
 			&:last-child {
 				width: calc(100% - 78px);
@@ -339,12 +178,18 @@
 			}
 		}
 	}
+    .graphAndLabel {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 0.5rem;
+    }
+    svg {
+        width: 100%;
+        height: 100%;
+    }
 	.plot_control {
-		float: right;
-		width: 181px;
-		height: 203px;
+        width: 14rem;
 		margin: 0;
-		background-color: #ECECEC;
 		border-top-right-radius: 3px;
 		border-bottom-right-radius: 3px;
 		.table {
@@ -361,13 +206,11 @@
 		}
 		.receiver-button {
 			a {
-				background-color: var(--accent);
-				border-radius: 3px;
-				border: 1px solid #e8b423;
+				background-color: var(--primary-500);
+				border-radius: 0.5rem;
 				color: #000;
 				font-size: 10px;
-				line-height: 17px;
-				text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+				line-height: 1.25rem;
 				text-transform: uppercase;
 				letter-spacing: 0.03em;
 				display: block;
@@ -386,14 +229,8 @@
 			display: table-cell;
 			vertical-align: middle;
 			text-align: right;
-			width: 87px;
 			font-size: smaller;
 		}
-		select {
-			width: 100%;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
 		.value {
 			padding: 4px;
 			color: #fff;
@@ -413,8 +250,8 @@
 		}
 	}
 	#RX_plot {
-		width: calc(100% - 201px);
-		height: 200px;
+        height: 13rem;
+        color: var(--text);
 		.line {
 			&:nth-child(1) {
 				stroke: #f1453d;
@@ -466,11 +303,6 @@
 			}
 		}
 	}
-	.buttons {
-		width: calc(100% - 20px);
-		position: absolute;
-		bottom: 10px;
-	}
 	.grid {
 		.tick {
 			stroke: silver;
@@ -501,16 +333,13 @@
 	}
 	text {
 		stroke: none;
-		fill: #828885;
+		fill: var(--text);
 		font-size: 10px;
 	}
-	.pid_titlebar {
-		border-radius: 3px;
-	}
 	.model_preview_cell {
 		position: relative;
 		width: 100%;
-		height: 180px;
+		height: 11rem;
 	}
 	.model_preview {
 		position: absolute;
@@ -518,220 +347,32 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		margin-top: -1px;
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
 	}
-	.rssi {
-		input {
-			border: 1px solid var(--subtleAccent);
-			width: 230px;
-			height: 20px;
-			float: left;
-			margin-right: 15px;
-			border-radius: 3px;
-		}
-	}
 	.receiver {
 		select {
-			border: 1px solid var(--subtleAccent);
-			width: 230px;
-			height: 20px;
-			float: left;
-			margin-right: 15px;
-			border-radius: 3px;
+            width: fit-content;
 		}
 	}
 	table {
-		margin-bottom: 0;
 		width: 100%;
-		float: left;
 		padding: 0;
-		text-align: left;
 		th {
-			text-align: left;
-			padding: 3px;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		td {
-			padding: 0;
-			text-align: left;
-			border-bottom: 1px solid var(--subtleAccent);
-		}
-		tr {
-			td {
-				&:first-child {
-					text-align: left;
-					width: 55px;
-				}
-			}
-		}
-		thead {
-			tr {
-				&:first-child {
-					background-color: #ececec;
-				}
-			}
-		}
-	}
-	dl.features {
-		dt {
-			float: left;
-			width: 10px;
-			height: 18px;
-			line-height: 18px;
-			input {
-				margin-top: 2px;
-			}
-		}
-		dd {
-			margin: 0 0 0 20px;
-			height: 18px;
-			line-height: 18px;
-		}
-	}
-	span {
-		margin: 0;
-	}
-	.spacer_box {
-		padding-bottom: 10px;
-		float: left;
-		width: calc(100% - 20px);
-	}
-	.select {
-		margin-bottom: 5px;
-		clear: left;
-		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
-		width: 100%;
-		float: left;
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-		}
-	}
-	.number {
-		input {
-			width: 220px;
-			margin-right: 11px;
-			border: solid 1px var(--subtleAccent);
-			border-radius: 3px;
-			min-height: 20px;
-			padding: 2px 4px 2px 4px;
-		}
-	}
-	.elrsContainer {
-		float: left;
-		width: calc(100% - 20px);
-	}
-	.elrsBindingPhrase {
-		margin-left: 5px;
-	}
-	.elrsUid {
-		float: left;
-		width: 223px;
-		margin: 10px 0 0 6px;
-		border: solid 1px var(--subtleAccent);
-		padding-left: 4px;
-	}
-	.gui_box_titlebar {
-		margin-bottom: 0;
-	}
-	.gui_box {
-		margin-bottom: 10px;
-		float: left;
-		font-weight: bold;
-		span {
-			font-style: normal;
-			font-weight: normal;
-			line-height: 19px;
-			color: #4f4f4f;
-			font-size: 11px;
+			border-bottom: 1px solid var(--surface-500);
 		}
-	}
-	.feature {
 		td {
-			border-bottom: none;
-			padding-bottom: 0;
-			margin-bottom: 0;
-			&:nth-child(2) {
-				width: 20px;
-			}
+			border-bottom: 1px solid var(--surface-500);
 		}
-		.gui_box {
-			float: left;
-		}
-	}
-	.serialRXBox {
-		padding-top: 0;
 	}
-	.spiRxBox {
-		padding-top: 0;
-		.select2 {
-			width: 230px;
-			height: 20px;
-			float: left;
-			margin-left: 4px;
-			margin-right: 15px;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-            color: #3f4241;
+    @media all and (max-width: 575px) {
+        .grid-box {
+            &.col5 {
+                grid-template-columns: 1fr !important;
+            }
+            &.col6 {
+                column-gap: 0.5rem;
+            }
         }
-	}
-}
-@media all and (max-width: 575px) {
-	.tab-receiver {
-		.bars {
-			margin-bottom: 10px;
-		}
-		.spacer {
-			padding-left: 0px;
-			padding-right: 0px;
-			width: 100%;
-		}
-		#RX_plot {
-			width: calc(100% - 120px);
-		}
-		.plot_control {
-			width: 112px;
-			.row {
-				display: inherit;
-			}
-		}
-		.feature {
-			.gui_box {
-				min-height: auto;
-			}
-			td {
-				&:nth-child(2) {
-					width: auto;
-				}
-			}
-		}
-		.features.rxMode {
-			width: 100%;
-		}
-		.serialRX {
-			width: 100%;
-		}
-	}
-}
-@media only screen and (max-width: 1055px) {
-	.tab-receiver {
-		.gui_box {
-			span {
-				line-height: 17px;
-			}
-		}
-	}
-}
-@media only screen and (max-device-width: 1055px) {
-	.tab-receiver {
-		.gui_box {
-			span {
-				line-height: 17px;
-			}
-		}
-	}
+    }
 }
diff --git a/src/css/tabs/sensors.less b/src/css/tabs/sensors.less
index 49bc238d81..587821522b 100644
--- a/src/css/tabs/sensors.less
+++ b/src/css/tabs/sensors.less
@@ -13,86 +13,49 @@
 	}
 	.wrapper {
 		display: none;
+        .gui_box {
+            display: flex;
+            flex-direction: row-reverse;
+        }
 	}
 	.plot_control {
-		float: right;
-		width: 160px;
-		height: 160px;
-		margin: 0;
-		background-color: #ECECEC;
-		border-top-right-radius: 3px;
-		border-bottom-right-radius: 3px;
-		.title {
-			line-height: 20px;
+        width: fit-content;
+        .title {
 			font-weight: bold;
-			padding-left: 10px;
-			padding-top: 10px;
-			text-align: left;
-			float: left;
-		}
-		dl {
-			padding: 10px 10px 0 10px;
-			line-height: 22px;
-			float: left;
-		}
-		dt {
-			float: left;
-			width: 60px;
-			height: 22px;
-			font-weight: bold;
-		}
-		dd {
-			height: 25px;
-			float: right;
-			width: 73px;
-		}
-		select {
-			float: right;
-			width: 80px;
-			border: 1px solid var(--subtleAccent);
-			border-radius: 3px;
-		}
+            margin-bottom: 0.75rem;
+		}
+        dl {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0.25rem;
+            dt, dd {
+                display: flex;
+                align-items: center;
+            }
+            dt {
+                font-weight: bold;
+            }
+            select {
+                min-width: 100%;
+            }
+        }
+        .x, .y, .z {
+            border-radius: 0.25rem;
+            padding: 0.25rem;
+            text-align: center;
+        }
 		.x {
 			background-color: #0000F0;
-			padding: 3px;
-			color: #fff;
-			height: 12px;
-			float: right;
-			border-radius: 3px;
-			line-height: 12px;
-			margin-bottom: 2px;
-			text-align: right;
 		}
 		.y {
 			background-color: #026303;
-			padding: 3px;
-			color: #fff;
-			height: 12px;
-			float: right;
-			border-radius: 3px;
-			line-height: 12px;
-			margin-bottom: 2px;
-			text-align: right;
 		}
 		.z {
 			background-color: #AB0202;
-			padding: 3px;
-			color: #fff;
-			height: 12px;
-			float: right;
-			border-radius: 3px;
-			line-height: 12px;
-			margin-bottom: 2px;
-			text-align: right;
 		}
 	}
 	svg {
-		float: left;
-		width: calc(100% - 180px);
-		height: 140px;
-		margin-bottom: 10px;
-		margin-top: 10px;
-		margin-left: 10px;
+		width: 100%;
 	}
 	.grid {
 		.tick {
@@ -126,7 +89,7 @@
 	}
 	text {
 		stroke: none;
-		fill: #828885;
+		fill: var(--text);
 		font-size: 10px;
 	}
 	.line {
@@ -160,35 +123,3 @@
 		}
 	}
 }
-@media all and (max-width: 575px) {
-	.tab-sensors {
-		.plot_control {
-			width: 130px;
-			dt {
-				width: 60px;
-			}
-			dd {
-				width: 50px;
-				select {
-					width: 100%;
-				}
-			}
-			.x {
-				height: 18px;
-				box-sizing: border-box;
-			}
-			.y {
-				height: 18px;
-				box-sizing: border-box;
-			}
-			.z {
-				height: 18px;
-				box-sizing: border-box;
-			}
-		}
-		svg {
-			width: calc(100% - 130px);
-			margin-left: 0;
-		}
-	}
-}
diff --git a/src/css/tabs/servos.less b/src/css/tabs/servos.less
index 9680eb9466..596b67aa98 100644
--- a/src/css/tabs/servos.less
+++ b/src/css/tabs/servos.less
@@ -4,10 +4,10 @@
 		line-height: 30px;
 		text-align: center;
 		font-weight: bold;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		border-bottom: 0;
-		background-color: var(--quietHeader);
-		color: var(--quietText);
+		background-color: var(--surface-300);
+		color: var(--text);
 		border-top-right-radius: 5px;
 		border-top-left-radius: 5px;
 	}
@@ -25,14 +25,14 @@
 			padding-top: 3px;
 			padding-bottom: 3px;
 			text-align: center;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			line-height: 14px;
 		}
 		td {
 			border-top: 0;
-			border-bottom: 1px solid var(--subtleAccent);
-			border-left: 1px solid var(--subtleAccent);
-			border-right: 1px solid var(--subtleAccent);
+			border-bottom: 1px solid var(--surface-500);
+			border-left: 1px solid var(--surface-500);
+			border-right: 1px solid var(--surface-500);
 			padding: 6px 5px 7px 5px;
 			&:nth-child(2) {
 				width: 140px;
@@ -49,7 +49,7 @@
 		}
 		tr {
 			&:nth-child(even) {
-				background-color: #f9f9f9;
+				background-color: var(--surface-200);
 			}
 			td {
 				&:first-child {
@@ -61,7 +61,7 @@
 		.main {
 			font-weight: bold;
 			text-align: center;
-			background-color: #ececec;
+			background-color: var(--surface-400);
 		}
 		.channel {
 			width: 40px;
@@ -71,11 +71,11 @@
 			}
 		}
 		input {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 		}
 		select {
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 		}
 		input[type="number"] {
@@ -173,7 +173,7 @@
 			font-style: normal;
 			font-weight: normal;
 			line-height: 19px;
-			color: #4f4f4f;
+			color: var(--text);
 			font-size: 11px;
 		}
 	}
@@ -183,7 +183,7 @@
 	}
 	.servoblock {
 		margin-bottom: 0;
-		background-color: #ECECEC;
+		background-color: var(--surface-400);
 	}
 	.right.servos {
 		float: left;
@@ -228,7 +228,7 @@
 		height: 100px;
 		margin-right: 10px;
 		text-align: center;
-		background-color: #f4f4f4;
+		background-color: var(--surface-300);
 		border-radius: 3px;
 		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 		.meter-bar {
@@ -236,9 +236,9 @@
 			width: 100%;
 			height: 100px;
 			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-			background-color: #E0E0E0;
+			background-color: var(--surface-300);
 			border-radius: 3px;
-			border: 1px solid #F5F5F5;
+			border: 1px solid var(--surface-500);
 		}
 		.label {
 			position: absolute;
@@ -247,7 +247,7 @@
 			text-align: center;
 			font-weight: bold;
 			font-size: 10px;
-			color: #474747;
+			color: var(--surface-950);
 		}
 		.label.rpm_info {
 			bottom: 28px;
diff --git a/src/css/tabs/setup.less b/src/css/tabs/setup.less
index 1d83adf3a6..37f6c3e506 100644
--- a/src/css/tabs/setup.less
+++ b/src/css/tabs/setup.less
@@ -1,126 +1,70 @@
 .tab-setup {
-    .ui-grid-col {
-		margin-bottom: 0;
-	}
-	.content_wrapper {
-		position: initial;
-	}
-	.default_btn {
-		margin-bottom: 10px;
-	}
-	.cell_setup {
-		border-bottom: solid 1px var(--subtleAccent);
-		padding-bottom: 8px;
-		padding-top: 7px;
-	}
-	.data-loading-setup {
-		width: 100%;
-		height: 100%;
-	}
-	.modelwrapper {
-		clear: both;
-		margin-bottom: 5px;
-	}
-	.model-and-info {
-		position: relative;
-		height: 400px;
-		margin-bottom: 10px;
-	}
 	#interactive_block {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: #f9f9f9;
-		border-radius: 5px;
-		border: 1px solid #e4e4e4;
+        position: relative;
+		background-color: var(--surface-200);
+		border-radius: 1rem;
+		border: 2px solid var(--surface-400);
 		a.reset {
 			position: absolute;
 			display: block;
-			top: 10px;
-			right: 10px;
-			border-radius: 3px;
+			top: 1rem;
+			right: 1rem;
+			border-radius: 0.5rem;
 			bottom: 10px;
 			height: 28px;
 			line-height: 28px;
 			padding: 0 15px 0 15px;
 			text-align: center;
 			font-weight: bold;
-			border: 1px solid var(--subtleAccent);
-			background-color: #ececec;
+			background-color: var(--surface-400);
 			z-index: 100;
 			&:hover {
-				background-color: #dedcdc;
+				background-color: var(--surface-500);
 			}
 		}
 	}
 	#canvas_wrapper {
-		position: absolute;
+		position: relative;
 		width: 100%;
 		height: 100%;
+        max-height: 32rem;
 		top: 0;
 		left: 0;
-		border-radius: 5px;
-	}
-	.regular-button {
-		margin-top: 8px;
-		margin-bottom: 8px;
-		margin-right: 10px;
-		background-color: #ffbb00;
-		border-radius: 3px;
-		border: 1px solid #dba718;
-		color: #000;
-		font-size: 12px;
-		text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-		display: inline-block;
-		cursor: pointer;
-		transition: all ease 0.2s;
-		padding: 0 9px;
-		line-height: 28px;
-		&:hover {
-			background-color: #ffcc3e;
-			transition: all ease 0.2s;
-		}
-		&:active {
-			background-color: #ffcc3e;
-			transition: all ease 0.0s;
-			box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
-		}
-	}
-	.regular-button.disabled {
-		cursor: default;
-		color: #fff;
-		background-color: #AFAFAF;
-		border: 1px solid #AFAFAF;
-		pointer-events: none;
-		text-shadow: none;
-		opacity: 0.5;
-	}
-	dialog {
-		border-radius: 5px;
-		.buttons {
-			position: static;
-			margin-top: 2em;
-		}
-		h3 {
-			margin-bottom: 0.5em;
-		}
-	}
+		border-radius: 1rem;
+	}
+    @media only screen and (max-width: 1055px) {
+        .grid-box {
+            grid-template-columns: 1fr !important;
+        }
+        .col-span-3 {
+            display: grid !important;
+            grid-column: span 1 !important;
+        }
+        .col-span-1 {
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+        #canvas_wrapper {
+            max-height: 20rem !important;
+        }
+    }
+
+    @media all and (max-width: 575px) {
+        .grid-box {
+            grid-template-columns: 1fr !important;
+        }
+    }
 }
 #accel_calib_running {
 	display: none;
 	width: 100%;
 	position: relative;
-	margin-bottom: 0;
-	margin-top: 0;
-	float: left;
 	padding: 5px 0 5px 0;
 	text-align: center;
-	background-color: #fff;
-	border-radius: 4px;
-	border: 1px solid #ffbb00;
-	color: #ffbb00;
+	background-color: var(--surface-300);
+	border-radius: 0.5rem;
+	border: 1px solid var(--primary-500);
+	color: var(--primary-500);
 	font-weight: bold;
 	font-size: 12px;
 	line-height: 13px;
@@ -131,15 +75,12 @@
 	display: none;
 	width: 100%;
 	position: relative;
-	margin-bottom: 0;
-	margin-top: 0;
-	float: left;
 	padding: 5px 0 5px 0;
 	text-align: center;
-	background-color: #fff;
-	border-radius: 4px;
-	border: 1px solid #ffbb00;
-	color: #ffbb00;
+	background-color: var(--surface-300);
+	border-radius: 0.5rem;
+	border: 1px solid var(--primary-500);
+	color: var(--primary-500);
 	font-weight: bold;
 	font-size: 12px;
 	line-height: 13px;
@@ -152,23 +93,15 @@
 }
 .attitude_info {
 	position: absolute;
-	top: 10px;
-	left: 10px;
-	width: 120px;
-	margin: 0 0 0 0;
+	top: 1rem;
+	left: 1rem;
+	margin: 0;
 	font-weight: normal;
-	color: var(--mutedText);
-	dl {
-		width: 100%;
-	}
-	dt {
-		width: 50%;
-		float: left;
-	}
-	dd {
-		width: 50%;
-		float: left;
-	}
+	color: var(--surface-950);
+    dl {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
 }
 .dialogBuildInfo {
     transition: all 0.2s;
@@ -178,9 +111,6 @@
     width: min-content;
     height: min-content;
 }
-.dialogBuildInfo-closebtn {
-    float: right;
-}
 .dialogBuildInfoGrid-container {
 	display: grid;
 	grid-template-columns: auto auto;
@@ -195,7 +125,6 @@
 		padding: 5px 5px 3px 5px;
 	}
 	dt {
-		float: left;
 		width: 99px;
 		height: 20px;
 		line-height: 20px;
@@ -214,7 +143,6 @@
 		padding: 5px 5px 3px 5px;
 	}
 	dt {
-		float: left;
 		width: 85px;
 		height: 20px;
 		margin-bottom: 2px;
@@ -232,46 +160,4 @@
 .disarm-flag {
 	padding-left: 5px;
 }
-@media all and (max-width: 575px) {
-	.tab-setup {
-		.cell_setup {
-			border-bottom: none;
-			padding-bottom: 15px;
-			padding-top: 0;
-		}
-		.default_btn {
-			margin-bottom: 5px;
-		}
-		.model-and-info {
-			height: 200px;
-		}
-		dialog {
-			width: calc(100% - 2em);
-			border-radius: unset;
-		}
-	}
-}
-@media only screen and (max-width: 1055px) {
-	.block.instrument {
-		.attitude {
-			width: 50px !important;
-			height: 50px !important;
-		}
-		.heading {
-			width: 50px;
-			height: 50px;
-		}
-	}
-}
-@media only screen and (max-device-width: 1055px) {
-	.block.instrument {
-		.attitude {
-			width: 50px !important;
-			height: 50px !important;
-		}
-		.heading {
-			width: 50px;
-			height: 50px;
-		}
-	}
-}
+
diff --git a/src/css/tabs/static_tab.less b/src/css/tabs/static_tab.less
index 46c77243eb..62b4c562f2 100644
--- a/src/css/tabs/static_tab.less
+++ b/src/css/tabs/static_tab.less
@@ -9,7 +9,7 @@
 		font-weight: bold;
 		padding-top: 16px;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 	}
 	.title {
 		font-size: 16px;
diff --git a/src/css/tabs/transponder.less b/src/css/tabs/transponder.less
index a4716c4ddd..3dd8b499a1 100644
--- a/src/css/tabs/transponder.less
+++ b/src/css/tabs/transponder.less
@@ -14,18 +14,18 @@
 			height: 20px;
 			line-height: 20px;
 			text-align: left;
-			border: 1px solid var(--subtleAccent);
+			border: 1px solid var(--surface-500);
 			border-radius: 3px;
 			margin-right: 11px;
 			font-size: 12px;
 			font-weight: normal;
-			background: var(--boxBackground);
-			color: var(--defaultText);
+			background: var(--surface-200);
+			color: var(--text);
 		}
 		.disabled {
 			width: 43px;
 			padding: 0px 5px;
-			background-color: #ececec;
+			background-color: var(--surface-400);
 		}
 		span {
 			margin-left: 0px;
@@ -33,7 +33,7 @@
 		margin-bottom: 5px;
 		clear: left;
 		padding-bottom: 5px;
-		border-bottom: 1px solid var(--subtleAccent);
+		border-bottom: 1px solid var(--surface-500);
 		width: 100%;
 		float: left;
 		&:last-child {
@@ -57,16 +57,16 @@
 		span {
 			font-style: normal;
 			line-height: 19px;
-			color: #4f4f4f;
+			color: var(--text);
 			font-size: 11px;
 		}
 	}
 	select {
 		min-width: 100px;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		border-radius: 3px;
-		background: var(--boxBackground);
-		color: var(--defaultText);
+		background: var(--surface-200);
+		color: var(--text);
 	}
 }
 .require-transponder-supported {
diff --git a/src/css/tabs/vtx.less b/src/css/tabs/vtx.less
index 44df5d8eb6..293b431606 100644
--- a/src/css/tabs/vtx.less
+++ b/src/css/tabs/vtx.less
@@ -1,5 +1,4 @@
 .tab-vtx {
-	height: 100%;
 	.cf_table {
 		-webkit-border-horizontal-spacing: 1px;
 	}
@@ -9,84 +8,40 @@
 	.require-upgrade {
 		display: block;
 	}
-	.columnsWrapper {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		.leftColumn {
-			width: calc(100% - (250px + 25px));
-		}
-		.rightColumn {
-			flex-shrink: 0;
-			flex-grow: 0;
-			flex-basis: 250px;
-		}
-	}
-	.leftWrapper {
-		float: left;
-		width: calc(60% - 20px);
-	}
-	.rightWrapper {
-		float: left;
-		width: calc(30% - 0px);
-		max-width: 300px;
-		margin: 0 0 10px 20px;
-	}
-	input {
-		border: 1px solid var(--subtleAccent);
-		border-radius: 3px;
-		max-width: 100px;
-		background: var(--boxBackground);
-		color: var(--defaultText);
-	}
-	select {
-		border: 1px solid var(--subtleAccent);
-		border-radius: 3px;
-		max-width: 100px;
-		background: var(--boxBackground);
-		color: var(--defaultText);
-	}
-	.number {
-		input {
-			width: 55px;
-			padding-left: 3px;
-			height: 20px;
-			line-height: 20px;
-			text-align: left;
-			border-radius: 3px;
-			margin-right: 11px;
-			font-size: 12px;
-			font-weight: normal;
-		}
-	}
-	.gui_box {
-		span {
-			font-style: normal;
-			line-height: 19px;
-			color: var(--mutedtext);
-			font-size: 11px;
-		}
-	}
-	.spacer_box {
-		.field {
-			margin-bottom: 5px;
-			clear: left;
-			padding-bottom: 5px;
-			width: 100%;
-			float: left;
-			&:not(:last-child) {
-				border-bottom: 1px solid var(--subtleAccent);
-			}
-		}
-	}
 	.select_mode {
 		.field {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 0 !important;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--surface-500);
+            .helpicon {
+                margin-top: 0;
+                margin-right: 0;
+            }
 			>span {
-				margin-right: 10px;
 				display: inline-block;
-				min-width: 100px;
+				min-width: 9rem;
+                &+span {
+                    margin-right: auto;
+                }
 			}
+            label {
+                width: 100%;
+                >span {
+                    margin-right: auto;
+                }
+            }
+            &:last-child {
+                margin-bottom: 0;
+                padding-bottom: 0;
+                border-bottom: none;
+            }
+            .checkboxspacer {
+                height: 1.5rem;
+                display: flex;
+                align-items: center;
+            }
 		}
 	}
 	input.one_digit_input {
@@ -98,6 +53,17 @@
 	.vtx_table_box {
 		min-width: 750px;
 	}
+    .VTX_info {
+        table {
+            td {
+                padding: 0.25rem 0;
+                // first td 1rem right padding
+                &:first-child {
+                    padding-right: 1rem;
+                }
+            }
+        }
+    }
 	.table_vtx_bands {
 		tr {
 			&:first-child {
@@ -107,13 +73,13 @@
 			}
 		}
 		td {
-			padding: 0 1px;
+			padding: 0.25rem;
 			text-align: center;
 		}
-		input {
-			display: block;
-			margin: 0 auto;
-		}
+        input {
+            min-width: 0;
+            padding-right: 0.25rem;
+        }
 	}
 	.table_vtx_powerlevels {
 		tr {
@@ -124,48 +90,59 @@
 			}
 		}
 		td {
-			padding: 0 1px;
-			text-align: center;
+            padding: 0.25rem;
+            text-align: center;
 		}
 		input {
 			display: block;
-			margin: 0 auto;
-		}
-	}
-	.field_powerlevel_value {
-		input {
-			width: 53px;
-		}
-	}
-	.field_powerlevel_label {
-		input {
-			width: 53px;
-		}
-	}
-	.field_band_name {
-		input {
-			width: 71px;
-		}
-	}
-	.field_band_letter {
-		input {
-			width: 13px;
-		}
-	}
-	.vtx_table_bands_table {
-		span {
-			table {
-				float: left;
-			}
-		}
-	}
-	.vtx_table_powerlevels_table {
-		span {
-			table {
-				float: left;
-			}
-		}
-	}
+            min-width: 5rem;
+        }
+	}
+    @media all and (max-width: 575px) {
+        .tab-vtx {
+            .columnsWrapper {
+                flex-wrap: wrap;
+                .leftColumn {
+                    width: 100%;
+                }
+                .rightColumn {
+                    width: 100%;
+                    flex-basis: auto;
+                }
+            }
+            .x-scroll-wrapper {
+                overflow-x: auto;
+                .gui_box {
+                    min-width: fit-content;
+                }
+            }
+            .leftWrapper {
+                width: 100%;
+                overflow: auto;
+            }
+        }
+        .grid-box {
+            &.col4 {
+                grid-template-columns: 1fr;
+                .col-span-3 {
+                    grid-column: span 1;
+                }
+                .col-span-4 {
+                    grid-column: span 1;
+                }
+            }
+        }
+        .content_toolbar{
+            .save_lua_btn, .save_file_btn {
+                display: none;
+            }
+            &.expanded {
+                .save_lua_btn, .save_file_btn {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 .tab-vtx.supported {
 	.require-support {
@@ -178,21 +155,3 @@
 #tab-vtx-templates {
 	display: none;
 }
-@media all and (max-width: 575px) {
-	.tab-vtx {
-		.columnsWrapper {
-			flex-wrap: wrap;
-			.leftColumn {
-				width: 100%;
-			}
-			.rightColumn {
-				width: 100%;
-				flex-basis: auto;
-			}
-		}
-		.leftWrapper {
-			width: 100%;
-			overflow: auto;
-		}
-	}
-}
diff --git a/src/css/theme.css b/src/css/theme.css
index d6b01facfb..0c1754ad9c 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -1,29 +1,78 @@
 /**
- * Main theme colors
- * This file is left as css on purpose to make it easier to work without
- * the need to compile the less files and still can be use in storybook
- */
-:root {
-    --accent: #ffbb00;
-    --error: red;
-    --subtleAccent: silver;
-    --quietText: #ffffff;
-    --quietHeader: #828885;
-    --defaultText: #000000;
-    --subtleText: #c0c0c0;
-    --mutedText: #616161;
-    --linkText: #2e2ebb;
-    --boxBackground: #ffffff;
-    --alternativeBackground: #f9f9f9;
-    --sideBackground: #ffffff;
-    --ledAccent: #adadad;
-    --ledBackground: #e9e9e9;
-    --gimbalBackground: #eee;
-    --gimbalCrosshair: var(--subtleAccent);
-    --switcherysecond: #c4c4c4;
-    --pushedButton-background: #c4c4c4;
-    --pushedButton-fontColor: #000000;
-    --hoverButton-background: #ffcc3e;
-    --superSubtleAccent: #cccccc;
-    --accentBorder: #ffbb00;
+* Main theme colors
+* This file is left as css on purpose to make it easier to work without
+* the need to compile the less files and still can be use in storybook
+*/
+
+body {
+	--primary-50: #FFFAEB;
+	--primary-100: #FFF4D6;
+	--primary-200: #FFE9AD;
+	--primary-300: #FFDC7A;
+	--primary-400: #FFCD42;
+	--primary-500: #FFBB00;
+	--primary-600: #E6A800;
+	--primary-700: #CC9600;
+	--primary-800: #A87B00;
+	--primary-900: #7A5A00;
+	--primary-950: #5C4300;
+
+    --primary-transparent-1: rgba(255, 187, 0, 0.1);
+    --primary-transparent-2: rgba(255, 187, 0, 0.2);
+    --primary-transparent-3: rgba(255, 187, 0, 0.3);
+    --primary-transparent-4: rgba(255, 187, 0, 0.4);
+
+    --surface-50: hsl(0, 0%, 100%);
+    --surface-100: hsl(0, 0%, 98%);
+    --surface-200: hsl(0, 0%, 95%);
+    --surface-300: hsl(0, 0%, 92%);
+    --surface-400: hsl(0, 0%, 84%);
+    --surface-500: hsl(0, 0%, 75%);
+    --surface-600: hsl(0, 0%, 65%);
+    --surface-700: hsl(0, 0%, 55%);
+    --surface-800: hsl(0, 0%, 40%);
+    --surface-900: hsl(0, 0%, 30%);
+    --surface-950: hsl(0, 0%, 20%);
+
+    --text: hsl(0, 0%, 0%);
+
+    --error-400: #ee2b55;
+	--error-500: #e2123f;
+    --error-600: #c10f36;
+
+    --error-transparent-1: rgba(226, 18, 63, 0.1);
+    --error-transparent-2: rgba(226, 18, 63, 0.2);
+    --error-transparent-3: rgba(226, 18, 63, 0.3);
+    --error-transparent-4: rgba(226, 18, 63, 0.4);
+
+    --success-400: #90f042;
+	--success-500: #70e212;
+    --success-600: #5cb10f;
+
+    --success-transparent-1: rgba(112, 226, 18, 0.1);
+    --success-transparent-2: rgba(112, 226, 18, 0.2);
+    --success-transparent-3: rgba(112, 226, 18, 0.3);
+    --success-transparent-4: rgba(112, 226, 18, 0.4);
+
+    --warning-500: #ff6600;
+    --warning-600: #e65c00;
+
+    --switcherysecond: var(--surface-400);
+}
+
+
+body.dark-theme {
+    --surface-50: hsl(0, 0%, 4%);
+    --surface-100: #181818;
+    --surface-200: hsl(0, 0%, 13%);
+    --surface-300: hsl(0, 0%, 15%);
+    --surface-400: hsl(0, 0%, 20%);
+    --surface-500: hsl(0, 0%, 24%);
+    --surface-600: hsl(0, 0%, 35%);
+    --surface-700: hsl(0, 0%, 45%);
+    --surface-800: hsl(0, 0%, 60%);
+    --surface-900: hsl(0, 0%, 70%);
+    --surface-950: hsl(0, 0%, 80%);
+
+    --text: hsl(0, 0%, 95%);
 }
diff --git a/src/images/corner.svg b/src/images/corner.svg
new file mode 100644
index 0000000000..43e6248f4a
--- /dev/null
+++ b/src/images/corner.svg
@@ -0,0 +1,9 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 16 16"
+    fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M16 0C15.695 8.69847 8.69847 15.695 0 16H16V0Z"/>
+</svg>
diff --git a/src/images/dark-wide-2-compact.svg b/src/images/dark-wide-2-compact.svg
new file mode 100644
index 0000000000..6fc1f0a53d
--- /dev/null
+++ b/src/images/dark-wide-2-compact.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg4057"
+   sodipodi:docname="light-wide-2-compact.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   x="0px"
+   y="0px"
+   viewBox="-21 39.4 167.7 18.6"
+   xml:space="preserve"
+   width="167.7"
+   height="18.6"><metadata
+   id="metadata3781"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs3779" />
+<style
+   type="text/css"
+   id="style3748">
+	.st0{fill:#FFBB00;}
+	.st1{fill:#3A3A3A;}
+</style>
+<sodipodi:namedview
+   inkscape:window-maximized="1"
+   inkscape:pageopacity="0.0"
+   inkscape:current-layer="g3776"
+   inkscape:showpageshadow="false"
+   inkscape:window-y="-8"
+   inkscape:window-height="837"
+   inkscape:pageshadow="2"
+   fit-margin-bottom="0"
+   inkscape:window-x="-8"
+   fit-margin-right="0"
+   inkscape:window-width="1600"
+   inkscape:document-units="px"
+   id="base"
+   borderopacity="1.0"
+   bordercolor="#666666"
+   fit-margin-left="0"
+   inkscape:cx="75.420679"
+   inkscape:zoom="3.959798"
+   showgrid="true"
+   inkscape:cy="-2.46571"
+   fit-margin-top="0"
+   borderlayer="false"
+   showborder="true"
+   showguides="false"
+   pagecolor="#ffffff">
+	<inkscape:grid
+   type="xygrid"
+   id="grid4093"
+   originy="-961.9602"
+   originx="-40.900311" />
+</sodipodi:namedview>
+<g
+   id="g3776"
+   transform="translate(-30.859,-43.699999)">
+	<g
+   id="g3772"
+   transform="translate(-40.041,21.699999)">
+		<path
+   class="st0"
+   d="m 56.2,61.9 h 9.7 c 4.7,0 4.7,2.6 4.1,4.4 -0.6,1.8 -1.8,2.8 -3.4,3.5 1.4,0.5 2.4,1.8 1.5,4.4 -1.3,3.6 -5,5.4 -8.1,5.4 H 49.9 Z m 0.7,13.5 h 3.2 c 1.1,0 2.3,-0.3 2.7,-1.7 0.4,-1 0,-1.6 -1.3,-1.6 h -3.4 z m 2.3,-6.6 h 2.9 c 1.1,0 2,-0.3 2.4,-1.5 0.3,-0.9 -0.3,-1.2 -1.4,-1.2 h -2.9 z"
+   id="path3752"
+   inkscape:connector-curvature="0"
+   style="fill:#ffbb00" />
+		<path
+   class="st0"
+   d="M 74.9,61.9 H 89.6 L 88,66.4 h -9.3 l -0.8,2.2 h 8.4 l -1.5,4.2 H 76.4 L 75.7,75 h 9.5 l -1.6,4.5 h -15 z"
+   id="path3754"
+   inkscape:connector-curvature="0"
+   style="fill:#ffbb00" />
+		<path
+   class="st0"
+   d="m 94.7,66.4 h -5 l 1.6,-4.5 h 15.4 l -1.6,4.5 h -5 l -4.7,13.2 h -5.5 z"
+   id="path3756"
+   inkscape:connector-curvature="0"
+   style="fill:#ffbb00" />
+		<path
+   class="st0"
+   d="m 111.8,61.9 h 5.3 l 0.2,17.7 h -5.6 l 0.2,-2.5 h -5.6 l -1.7,2.5 h -5.5 z m 0.3,11.4 0.3,-5.5 v 0 l -3.7,5.5 z"
+   id="path3758"
+   inkscape:connector-curvature="0"
+   style="fill:#ffbb00" />
+		<path
+   class="st1"
+   d="m 125.1,61.9 h 13.7 l -1.6,4.5 H 129 l -0.8,2.2 h 7.1 l -1.5,4.2 h -7.1 l -2.4,6.8 h -5.5 z"
+   id="path3760"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+		<path
+   class="st1"
+   d="m 140.9,61.9 h 5.5 L 141.7,75 h 7.9 l -1.6,4.5 h -13.3 z"
+   id="path3762"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+		<path
+   class="st1"
+   d="m 156.2,61.9 h 5.5 l -6.3,17.7 h -5.5 z"
+   id="path3764"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+		<path
+   class="st1"
+   d="m 172,77.8 c -1.8,1.6 -3.9,2.2 -5.8,2.2 -5.2,0 -7,-4.1 -5.2,-9.1 2.4,-6.8 8.1,-9.5 12.1,-9.5 4.5,0 6.5,2.5 5.8,6.6 h -5.2 c 0.3,-1.3 -0.5,-2.2 -1.8,-2.2 -3.8,0 -5,4 -5.5,5.2 -0.6,1.7 -0.9,4.6 2.4,4.6 1.3,0 2.8,-0.6 3.5,-2 h -2.4 l 1.3,-3.8 h 7.3 l -3.5,9.8 h -3.5 z"
+   id="path3766"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+		<path
+   class="st1"
+   d="m 184.3,61.9 h 5.5 l -2.2,6.2 h 5.1 l 2.2,-6.2 h 5.5 l -6.3,17.7 h -5.5 l 2.5,-7 H 186 l -2.5,7 H 178 Z"
+   id="path3768"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+		<path
+   class="st1"
+   d="m 205.6,66.4 h -5 l 1.6,-4.5 h 15.4 l -1.6,4.5 h -5 l -4.7,13.2 h -5.5 z"
+   id="path3770"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+	</g>
+
+</g>
+</svg>
diff --git a/src/images/dark-wide-2.svg b/src/images/dark-wide-2.svg
new file mode 100644
index 0000000000..8ffccf5f02
--- /dev/null
+++ b/src/images/dark-wide-2.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg4057" sodipodi:docname="light-wide-1.svg" inkscape:version="0.91 r13725" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-21 39.4 239.9 62.3"
+	 style="enable-background:new -21 39.4 239.9 62.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFBB00;}
+	.st1{fill:#3A3A3A;}
+</style>
+<sodipodi:namedview  inkscape:window-maximized="0" inkscape:pageopacity="0.0" inkscape:current-layer="layer1" inkscape:showpageshadow="false" inkscape:window-y="241" inkscape:window-height="666" inkscape:pageshadow="2" fit-margin-bottom="0" inkscape:window-x="2360" fit-margin-right="0" inkscape:window-width="1011" inkscape:document-units="px" id="base" borderopacity="1.0" bordercolor="#666666" fit-margin-left="0" inkscape:cx="271.31351" inkscape:zoom="1.4" showgrid="true" inkscape:cy="-40.407035" fit-margin-top="0" borderlayer="false" showborder="true" showguides="false" pagecolor="#ffffff">
+	<inkscape:grid  type="xygrid" id="grid4093" originy="-961.96023" originx="-10.04131"></inkscape:grid>
+</sodipodi:namedview>
+<g>
+	<g>
+		<path class="st0" d="M56.2,61.9h9.7c4.7,0,4.7,2.6,4.1,4.4c-0.6,1.8-1.8,2.8-3.4,3.5c1.4,0.5,2.4,1.8,1.5,4.4
+			c-1.3,3.6-5,5.4-8.1,5.4H49.9L56.2,61.9z M56.9,75.4h3.2c1.1,0,2.3-0.3,2.7-1.7c0.4-1,0-1.6-1.3-1.6h-3.4L56.9,75.4z M59.2,68.8
+			h2.9c1.1,0,2-0.3,2.4-1.5c0.3-0.9-0.3-1.2-1.4-1.2h-2.9L59.2,68.8z"/>
+		<path class="st0" d="M74.9,61.9h14.7L88,66.4h-9.3l-0.8,2.2h8.4l-1.5,4.2h-8.4L75.7,75h9.5l-1.6,4.5h-15L74.9,61.9z"/>
+		<path class="st0" d="M94.7,66.4h-5l1.6-4.5h15.4l-1.6,4.5h-5l-4.7,13.2h-5.5L94.7,66.4z"/>
+		<path class="st0" d="M111.8,61.9h5.3l0.2,17.7h-5.6l0.2-2.5h-5.6l-1.7,2.5h-5.5L111.8,61.9z M112.1,73.3l0.3-5.5l0,0l-3.7,5.5
+			H112.1z"/>
+		<path class="st1" d="M125.1,61.9h13.7l-1.6,4.5H129l-0.8,2.2h7.1l-1.5,4.2h-7.1l-2.4,6.8h-5.5L125.1,61.9z"/>
+		<path class="st1" d="M140.9,61.9h5.5L141.7,75h7.9l-1.6,4.5h-13.3L140.9,61.9z"/>
+		<path class="st1" d="M156.2,61.9h5.5l-6.3,17.7h-5.5L156.2,61.9z"/>
+		<path class="st1" d="M172,77.8c-1.8,1.6-3.9,2.2-5.8,2.2c-5.2,0-7-4.1-5.2-9.1c2.4-6.8,8.1-9.5,12.1-9.5c4.5,0,6.5,2.5,5.8,6.6
+			h-5.2c0.3-1.3-0.5-2.2-1.8-2.2c-3.8,0-5,4-5.5,5.2c-0.6,1.7-0.9,4.6,2.4,4.6c1.3,0,2.8-0.6,3.5-2h-2.4l1.3-3.8h7.3l-3.5,9.8h-3.5
+			L172,77.8z"/>
+		<path class="st1" d="M184.3,61.9h5.5l-2.2,6.2h5.1l2.2-6.2h5.5l-6.3,17.7h-5.5l2.5-7H186l-2.5,7H178L184.3,61.9z"/>
+		<path class="st1" d="M205.6,66.4h-5l1.6-4.5h15.4l-1.6,4.5h-5l-4.7,13.2h-5.5L205.6,66.4z"/>
+	</g>
+	<path class="st0" d="M30.5,84c-4.8-2-8.3-5-11.7-6.3c1.8-0.8,3.5-1.9,4.5-2.9c1.1-1.1,1.5-2.4,1.4-3.7c3.6,2.4,7.8,2.6,10,2.7
+		c2.2,0.1,4.4,0.6,4.8,1.6c0,0,0.7-12.2-24.4-20.3c0,0,7.5,3.4,9.8,6.1c0,0-2.7-0.2-3.8,1.6c-0.6,0.9-0.7,2.2-0.2,3.7
+		c-0.4-0.1-0.9-0.1-1.4-0.2l-39.8-22.1l4.2,9l-3.9-1.4l1.2,2.2c0,0,1.7,3.2,5.5,9.9c3,5.3,8.4,7.9,15.6,7.6c0.3,0,0.6,0,0.9,0
+		c1.8-0.1,4.6-0.4,7.3-0.6c-0.2,1-0.2,2.2,0.1,3.6c0.3,1.6,1,2.7,1.8,3.3c-2.1,1-4.1,3-4.9,5.3c0,0,0,0,0,0c-0.6,1.5-0.8,3.2,0,5.3
+		c0,0,0,0,0,0c0.1,0.4,0.3,0.8,0.6,1.3c0.2,0.4,0.5,0.8,0.9,1.2c4.4,5.3,15.2,4.4,22,1.6c0.1,0,0.2-0.1,0.3-0.1
+		c0.5-0.2,1.1-0.5,1.6-0.7c0.1-0.1,0.2-0.1,0.3-0.2c0.6-0.3,1.1-0.6,1.7-0.9c6.7-3.9,9-8.5,9-8.5S37,86.7,30.5,84z M32.2,65.9
+		c1.9,0.8,4.8,5.6,4.8,5.6c-2.4-0.4-7.3-2-7.8-3.8S30.3,65.1,32.2,65.9z M25.9,89.5c0,0,0.5,1.6-0.1,3.7c-0.7,0.2-1.4,0.3-2.1,0.5
+		C24.9,92.8,25.9,91.4,25.9,89.5z M-7,59l17.3,9.8c-3.2,0.3-6.5,0.6-8.2,0.7c-2.6,0.1-4.9-0.2-6.9-0.9c-3-1-5.2-3-6.8-5.7
+		c-2-3.4-3.3-5.9-4.2-7.5l3.6,1.2l-3.6-7.7l31.5,17.4c-0.9,0.1-1.7,0.4-2.5,0.7L-7,59z M11.4,71.3c1.2-5.8,8.7-4,8.7-4
+		c-2.7,0-4.3,0.7-5.1,1.8c-1.2,1.6,0.3,2.9,0.3,2.9c-0.4-0.1-0.8-0.2-1-0.4c0,0,0,0,0,0.1c0.6,2.3,2.5,2.9,2.5,2.9
+		c-0.7,0.1-1.3,0-1.8-0.1c0.4,0.9,1,1.6,1.3,1.8c-1.7,0-2.5,0.4-3.1,0.6C11.9,76,10.8,73.8,11.4,71.3z M16.5,84.1
+		c0,0-2.7,3.4-8.6,3.4c-0.3-1.3-0.2-2.6,0.1-3.8C9.9,84.9,12.7,85.5,16.5,84.1z M11.6,92c2.5-0.6,5.7-2,8.7-5.4c0,0-0.4,3.8-3.2,7.3
+		c-1.3-0.2-2.6-0.5-3.8-1C12.7,92.6,12.1,92.3,11.6,92z M35.2,88.9c-0.3-0.9-0.5-2.8-0.5-2.8c2.1,0.2,4.6-0.7,4.6-0.7
+		C37.6,87.6,35.2,88.9,35.2,88.9z"/>
+</g>
+</svg>
diff --git a/src/images/icons/sensor_baro_off.png b/src/images/icons/sensor_baro_off.png
index 5644bd912652b359e8201f027a1e632ef9c67950..63a835dd7ef91cbdbd7786bf683d9fe295e3b866 100644
GIT binary patch
delta 2198
zcmV;H2x<3;51|o|BYyw^b5ch_0Itp)=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi
z!vFvd!vV){sAK>D2sTMXK~#8N?VDX}RL2#^uf6_Sf3RK~1%vA#uN~EDi%49xR#8+S
z3D`~Zu!)j9P^20OBcv9I_$9I^4+w=k)uN@U1hm2+g4CA=C4WT4PMXj(LLye2SZyRq
z2@z^(>k8W#+1~XBcK^T2T<3<`4aVAgmvsKpFf(V)IivgM%$b?H*N%mSg@uKMg@uKM
zg@uL1eU2PcXA8<pN=n)ykw{YI>*~i;MsD4@^|8w7v9YnE>fb;y8;~{RiL}<DqN2`d
zG#Xd!<mKf#xqrF2&dkh=Gd(@+q|<39l}Zh(ZWoDN#w=7sOdTp>vDltv%a;8-9*;*=
zJH^Gt4g?k!7S0vZkBZQw%Jjs<#2<}$Xb7FWva+(LMA)xHoJ$%Jmy?r|Qv2P~($e=t
z)OAJPN-g7j!J*8~&OWB{!Q|xRCF3R(guQI@tE;OomVcL*Cm;?e!rpFgZ|_JZlYdut
z3Z2uZPk*Jev-4#w*~icsA0Kya+_-V&+O=y9Mkf@6N?t`p#pcS&%5Ih_`Ay}cuCA`9
z8yXt^rs%t6)QGgm#fukfT3cIRRStZZJb3fwO=oa$uz6@`sK=-Uj$BiR0xj9*f`S5<
zI5veuB7gBy5qH&39H5V!arDr~4tt{#3PL4M8$c~N4nWG9HEX&>)T}GG1IQUi4`7GA
z+X)Gwk|zR+i6WqLoYT?KG3a&{0ORNZ?67w`At6-q6iwtaw~)uwpD{!8f^qab8|=eG
zsN~)6u;eWPp_1n<Kd;;k?!_iku#vX}Sn`&D(0|GMAIq;$2jQ<#-|l{fY*?}&TO%)~
zD_eg_Ny*35^lyu^3t2(lospzF@22wd@~<vmzTBaX$K&5MLs=7bAS)xUQs6C%BF}wI
zRaI40VurE`p_1pnE%>8Jch+40?ZLak0lz->VIo^|-hF}4$@52&AM?q;Li%CAM&1$-
zDt~!j6h+?How@Cc?1F-gyd@wja~>}|=aYkl<YB-@-VzWhc?+HMz}?9IZ_jzUvpzI6
zHO0mMo`F4nOgC_ZLY}T&{N&iDn?sHN_OKXWhdqAqXT*UbaPo9leKH!2zFsQu+bdxC
z#bUAFx*Y@m^7I2eZ@FTRAN=9h6$Xev$$#VhoTB76Wo2dgdSEwtB9X{H)~{dxgTB7L
z9~m{s{M<V{_2*s;poczo*y9I(_{G0b3j{%a=o3+X`kex0HD5d#;x4tfw?DsU&z^U4
za&q|YE-oToQvH*{!omnTMA_)*==UTmpPZcR-M4Sw_1@mz%OdUV3l}b|S7cVo4}U*H
z7O4H5bUOWO=>~F+2`utN+IB@pqeq-Duyg0mt*x!CeR}Ye$aq#u@{;u0)y{_yKrNem
z<cy<-K6cpS2Y>j*Kl8YT0U)SfjUy{otoVeeBTo@cjg5`1r%s)EMMO-CkQbD*I`!~w
z9y6br8PnVOkIyU=dCu6_7+*=fkbg?04oaT4Wy=<pd=~^Vt|+}aFfdRjv(J6+k_iMt
zo=AB-9*@5TIglcP-s|u0Z&rI;vdto{Tg1A=nW&r>kZuTqz-AHIBLa)pu3g(L`J<2w
zxx>T5PpJOAG0PYNS+>e`&+$<r#BueiuC6``aT<zfx&6|MIL0Ahp<;-4-+wS;hdqAq
zhhN5-hxy!zGmJpUQ{HOwa+soLV#kghuhA9>Pl$v%kGQ*mM<90CBf}qlX)_P=(ato2
z+AtD4G|Nu;>@Ue=as;6wq{WNK`66wh;)}2r{NNA2_&5Iv3I5460wGTiw9H4)fZFa+
zLIl)$5xH1khdpil;nyRU`F~uc3?rz>bHT$YH_hGV6)o=f#K;$0{PqC9o;)Z7LY{We
zo2JQ;W2I?wJK&@3dxqcM@7F(HCJ_jEO7Ne0QK5(A3-%(~t5>h?CQsc9u*2STi;Q14
zDw)rfW*C8xr=9VAk0j-z0^Jn8Py6uU!++3&{>fX4iz(P)k01Qumwz_%FdywqBM|a*
zyLiLf2}$(2x9&z>Q&W>_YHHf6u|?em(8msY`uM{y{+WmQT*V9{5b{o(IPs<)?ka7r
zUdl<2>PF!nWRD*|-rdm9@S>vWt_VaAeeCGt2Y>hl%)@+cC&LJYyj81KjVnri#w`GF
z$W^o)QK?t7q|cl=bANQ>#*IJJgJ1S9%{vR@=%J4t_V~dcz(4aapDV~P0=e6Qp`oGJ
zx^?T`oSK^Y7DP-;OmGkVR2Teawf`zvbYx^?Wm{WY^OY-CHl@?)I+0N!!iJQ?KB=p#
z>p61dNRRT{KSf+hq&=kFwp+K1TD9FJt8-uP`Sa&DRa8{Chkx)d6%HIY&{SVvKddra
zTU$G;2$>ZbLn2}BE-DgBRjO1TRH-#J{ZgaC5#>4Tu*VPn@QZ(=^5ugF$lJbs`!k6|
zVpNedM_@c2pH&30^CqR1e_Q*%kk2@J=zGNB2Y>j*ztIf@fh}7PdcdMxyLPplJ$v@3
z+RND;y?1q{jDJb?zQ!(VDUPcyR$Z@6;oBmwg#1P^8xPC%dP_@7+o3~;&Z?a@(*%OR
z$pa90?AWoj2M->6d31Diqmj7@A0nwC6&bk<l9c;g!l;n}?X>Ug-o3kH+qP}}K@$f;
zArFWc-Uw7}-MY28udnaN+8`c*6bSQ*2jpHst_|eF#(&1fUz|L7lH<z1B+vL;<M|L8
zc^*Utzl>Gx-MjZ2=gytmJUl%7P3^w*io6FT=O{I!$osc;)XU0sA8gpLp=ba8{ePBx
zP^68i4h^A`=RqWLSYt=!FBxh3lRtkaI;q0>ZB(Suwy?0Uu&}VOu&}VOu&}UL5*+70
YSk{FbI}cM$+yDRo07*qoM6N<$f<fn8z5oCK

delta 1915
zcmZ8idpy(o8!yLo*qmY#rU?1z5QhoV6n=7D<eErET5hS#HivJ~X}M&`-3%4F&ZUyu
zk<NybdxT+RIfg|x*U`*xI_Iz7=g;T$JkRHO-tYJGJY_#8Lo&1gsk08Yr#x_Di)6nm
zirxo0M%s@Qr55#EMhES?fih99GD<ew>t^EVm+hrpq5aFtAT4Rf`ExwC&$buuXdYc{
z@L1NoGXS#Na=-F2J|j0EBR3;4@St3IPUq^5YHyyaU%7+0-{o|!k@;+s8hbXjcay!a
zP?31(4Bod8Ck>+zfms$F7l1%O`e-ZMW*kmrA}T_mLc5fd6!*5aw$a+!+PB69-MTqB
zIY=il>g#!XlKMI<K%6|)eBRSDrmC#$@Rg`2$S~Dk^=51=(R*z5Q3p5<f_fP4sP}4;
zT2%!(6~U}GV$_B>9Y20tK@JSQ`;X6eI!!Cd3wYtfQ}Z1fAGd_KEO*sKjGt74!4mTH
zBa-f^uk*DJ24FClGUNFs3WZYo?j16_tgMWrqoX4kd`|Z%+p#F&)q5CHuwRDsqHA`g
z$-=@Sv8AO&p>z19U({qve3S21VoD0A*0?PPzCBk%`{8O>>{?k^SlH`395MD<4>+Kr
zg7<9<nR}=TirD&y4jm-|nk>wSa|{+6Fj0NUMjAcQ81sJgRp@h5r5(5SdOgZ%5deHv
z$r+rpLyqQyT!(D!t&OyyXwtKvMBxP~KoASVaXF7Ut@1FDpE>2+j}9%D6^d}3Wm&D6
zl7254K=%}y$|e$b`y&87D_lhL4tR2F?Q2p`kr|O&I~uO&Rnz$(k~&O;SuXHaxUjt_
zl%i6BGh4rRrG8+YtLYvPK;dvWAeI}KgE@T1-iX{a12%!f@Ag$)7)qcdtTHZ<G=w6O
zV0|@P-}8$X8*D!Q+`ElvmPXtz_}f?MOt8u|M@PpeJM9v{Wf)~l%i4~lzRhPXv9{#{
zqN1vZZxwK4xpP>qxkPAeF5dbP5(Kfru1@c2#VM(>7M*3|0tJ$!jwIP5%Vkvms|foM
zjK`%S9oTGhW-u=*EUbuF*%Dp)5rx_JJ5iJzkAqESA!+%Kk6hwKMMTWFg~MR|bCrNe
zji$<OZX)15(wxp_vo$E<Fd^MR5s{-s+x$&<@{kWdPYi+->VSFs_M*%h?ac(%zG%}6
z^$GL%wRqR_w<=#8lsagE^?qZ6+vQkYNIwjVM$4nj82<kL@$bsZwaHlPv!g~a0zS`e
zK5R35SY3{s_UB+b*Mi#*povxq{QX26T|40zYo0B8y@46(;^MMWMZ$~-ww7nQwg>X6
zZ~s-{9>!?!eC}m+tttFO1ZI%5OAYOFfQ^;`Pem8YHJM50VISxdGD{2snx*T-U>}Z1
zd89Cvo>Yg|bc@S{ss5|K<mpamTpY*e#T4d0&`+N}0ZgN#%sCc~cri25e9&W%=i%w;
ziQ{4n;X$E6h9@3&xUTE^FU*Kq!qP+4+Ee8bAvAE8#RenBX1g5BG<fOFY79|;>CR1T
zNm|F*Jj=$>?+1TQXS5Dx#}SLzlD;(T(xg@UnBCo@4_ZPxOsaQuMB*q3Il#M@N{K#T
z2*A17@@5ehSFdgp7RTNk^R09V%pVCJRfCH4ipL4Kx+i(}RPn&(W%5){mJ0K=@ho&{
z%#Co=rq^%y7cVaD^ZlB%`hO~G9(wLAg+(_e1R9!M{V6{%^CAc#;J!7w7q)XMP1zFX
ztT(axSU=zVFdia32i51ZqR<L?0KX=wQVcshrRNu^f*1;&EfKK~myDK&O}9x>Dh8FE
z^&(wmx1+`|gU)`7S$(yZ1`@CYe$(_zlj!8W6KTq-I6_*ZZ3V*&Upu;x+PwF;sj26~
zwXaUGwA6h+%3mn5`BuH^9zM0mY`CFO@Tbd)T;uhbPSy2NBphA`pv(l{gIYz9wCTd4
zKN^8W-%hTs-h5j7CB2DPT2}|}_pp?<o*#_c_!fU|OJXk_94BCATb)6CvDj8`PaS&S
zy1qD$;@w(ul%ptIe*NuD(~?hcx|;cNRthsJpFr9#8pfs0V(b?Mk_aa<qxe~OcelqJ
z8~LW_Z<$kJz|cl#3s|Z;7>li2>o2pJj*pM`jw28vKM3uquZMOd2@BO75a0^~0Eu*#
zODqfRC98Ny_GH+-aEXbDQTugbf7&%r)2qhoV1)MlENE=G|F>SjU-e0R7D_Fz;8!|n
z#YnLH$ez?vdaOX}oZKNpqpK@?pTKn|(1&9jYdD}tH5deaL=*qGeWPtzEjn3a19EFX
z*Oknua&8FQgV%iW^r_5Y&LzOLl`6~7{vh%11&~ZXL4PHGL`K7^qUu6}@e{&=#aAUU
zIcS10$eKJlv$Dw*E$3B60Ypg07fuNck^QZ{7q;i-=E6inS)!^)CFh@gThO0=lT#yV
zPgxg#(F<E*mtCVrJ{eEw>+kQESfrYnC{;>u%DSqFyH}@p+_qDIN)qVVWsx7BI_)r^
wlIb;4asw-j^%N{U!~Ne86Rj$q0>xUmC%X8_8F~dve~;)n*tyzLPX{Lc53^9zP5=M^

diff --git a/src/images/icons/sensor_baro_on.png b/src/images/icons/sensor_baro_on.png
index 3073d06fdb67ddecdc4273bb318af4f9aa16bc51..89ff836f460a474e9f645dae6a8961c05016c07f 100644
GIT binary patch
delta 1851
zcmV-B2gLaI3Ca$TB!2;OQb$4nuFf3k00004XF*Lt006O%3;baP00009a7bBm000id
z000id0mpBsWB>pL-$_J4RCr$Pn`>+pMHI)+-1gqvSAc>KkT$$pXbUI;LM>oGff5CS
ziS~;|`5?hWO@PEGQImc!!NdSD8WZgYjq!^mQNv4G#PVv3$bZv<KwDmxSJl$e^mSi5
zo-=z&Zyy2Mn>)KC^Go*bnKN_FZ2#Te*`3US!C){L3<iV2U@#aA_c?<1u0U4I7y<sk
zYBX2kHWjzwxZTF>3~oO`z+WO3ooqqd6}Uz`S)H>Aq}YsRy6qW|W)O0{c=FsgTy_)>
z?;S-}=f01^eSeMS-Gn33shw)?0vtc{WL3^`JdEvJ?4}cBR~1;{Yv4&73nHlieaUuJ
zH*$q2IJbifj^L<x^5`rt1Ut{6HIZEaR_Cvmu3X+wQwLYQJ_v<^;GLcg8572h-w2-M
zr@0j(E`l#PN6bDJVuyB|6|XXDDF|;F7ts+udH9dI7k?T?K|@gyMA!?ZrI3)>1ey7d
zX8#BxaR$4weW*~(t1su0cAUQF74qID*tjYG4Y(3596@FBQ$4%7=^d{bXT_6Z0$Yl<
z&ek#^KytAc<fnQr+VqLnjkDqjNMTE{=?FBjIUxP&`^4+U6^|<26c>ZV=78L*UN^21
z?|#FG7k>jrycjUz#efkn23#wi+?C~*ho|Pzo?WiPmEy^x6NkeH?<ugXGqhJ_7vjz{
zFW_B*zf<f2?mK-?vF$3{DV_|BV#`Lhr?TZL+$o+FaqYc0n)~7)-HH(}28?(yV8n|7
zBVG&`@nXP;7XwDT7;sEHc{n#4yU*j|5b@;Md4HV25%FYIP9a!u9E2y6T|<N7F^|gU
z0NTZqhjO3AznYd;q}d)O()I&ecc*_l%p<njdG(@IJer@w9=}J^YkLqGz7FjdUf#90
z;Z647Q6==A!}G{H69cLpwpVdIcqy;SuMus_Eo3PqKt}EnG-ui#M22c_Hq^gz@H(6>
zT7M6n^5FDz@I*cUA>YQ@9)STuAjM~3C43|n)HIiFhU5j0z_ihsS>J*1PUbemakzSR
zj_9-EAYSM@^D^>Y$KNR7!i`NgQ8*7ASHe|JeGxq2T3UaHwb8;6UggJnYDeuUj^Zf~
zw;^V7KU&Zto;vG5Zs4L#@cO$oHE@E~p?}Eg+;t$Vt#}<gz_kNI_1I2U<*ubTil;nW
z%g7COfAL4pnU|5b5P!$n1;pw)v}1q!)<wk-mX$e6K?1D^9SmD2j^Zf~<zqiFj{A!{
zdc?CrFR^74X)ak&3?1qW5#kH>4i1c?c*;Zh*lW|bzc`^sJOOjrA_A8$wro>YMt{y?
z{GFui!83{Df%65(R`l*KZfFuOF>2*!`26@)YK1#Zw=Yxsp~CShALdm)BD%jgqDMS{
zVZ2Aejd#}Ii5S<{alD<c*QguSU;NM|UJoL%XPKB4ifuh{bbNGPP3RJ@mG}500b|&r
zXT7Uz4UOpd=)BSW#SuN?$?zq%uz$zI99c0wN!gLxy_d-j7LHf>Ft73v(f!2{J>ppb
zdM)e52fn1|$f!Qix*uQBYLs`dV4R94?0i0D6TSP38+ybGweDn#iL9mH0({Maz+WGd
zgUW*-LUAhIE~<QY=+|F-&?4Tkx|Tg4BUiXcH~0CnDo;Jg?mG}HgHR*AVt@T#0VC92
z#UUyW=2JBU_M`gKfEMv)uc5bqTc2`~kzdKGsag1n)%A15trF<C@EYE$>bY`Ys2<x<
zdy1oY%EPrb*pKQ@1KOsf_IwP(7ca=(gJ;PT>>@7Vzpqf_pRJ>5rjY>{^UR#ILhz+8
z0g*Hbk8UK6qPIYHU4US7`G4LcZRNN8a6`?)(Db_nboTW;E6VWizZ|SvvgAE}2#+&b
zKcBk&6U-g<;FR4UJR{geG~;2c5e0v4r9x>jq@@C+MI;UYiTLgthDd^dU^_rtQ8Bbp
z8~c)%U!vLbm87&<TK_q}Z1_s}jXiNkt9TW~khpMO!t;<i`CBaZU4J%q0JkmROW8Tl
z$9VQfejPNbuEVYGdcAgNuYGl2Wn>%8w6HJkX#a2z1x#8vAC^J#loC7x2b#ZY$M-FK
z)R6Uf$#&oorr=>_fs}KwuKzkcY5fbG=U4AL1iR@z$X+dI7mpwTbEm*#4`)u?2p<0;
zb`KsaP|?_Mal_g3aDPg-aD*e`5%d{oaxIKrUXW4<{;_Z2K=L?O-5VJ`0fB3u@2Ki1
z>zoWX`+g;<3&+IkrtA|)4Ya|irTH+;pEhPGj<T}=yjkE$cnGWMQOW`<@;5&D;$_@*
zEYNnNy!<en_NPHp;X8PVJBZ`rb%Ud<Zy1iU7C;JaK0#wGBQ%2$Miqm&b>JI6jk-au
pG8ha7gTY`h7z_r3!7yY1{sVyzgGYJ=f9U`K002ovPDHLkV1oY}fh+(3

delta 1251
zcmV<91RVRy4)+O=B!3`dNK#Dz0D2_=0Dyx40Qvs_0D$QL0Cg|`0P0`>06Lfe02gnP
zU&TfM000SaNLh0L01FcU01FcV0GgZ_000DiNkl<Zc-rlp&r1|x7{|wSb8|H{5bVcB
zD^61P>JJb!q);j$Dk|z=-i+wvu}hbw4jrUZL6-_eJ4BRj+JEkJ5Hj;*X|WWQU}*jz
zOqA()-hF0$=iM=P-45~2bNDjO`}`Q*&(8bK%roz3*tTu3HYbL_@E9J$V|Xlv$M6^)
z!(%Z#hUY(cPi`0)vR@zYQU&Nb$O8QY*|fE&y~6SJ%IV7QGk6z4GX!is&5$3%lhnBZ
zG*z7pFQsE1aDRT;iAcX458oGC+|Tqm=684j&_@@PL}VcOz&H#(yFgXA#eHm7;9*?A
zzwj)x!3D%J-wxj~_JO@n9@e;z?Pyp08~h9}>Vgp~I|sG`uPd==2fG3<>SuU8GK~2?
zqiUU77$LID@Ou0V@0kn(+PC}-9@%Ah&lujCj4Z_P7=IqaV|WaY;W4~_1+N%%khTmj
z2YBV6acUc<eTJ76Jge@M8&chIhL<h8M5N8t9uJ>pc-g{>huaw*!((_1kKr*qhR5(2
z9>en^JQE(fKIaEd#GAf?2OVw%EqJT~$PHdfn5WSf@Svkjpydn*@o;xm@KSy%K+M;q
zH9V@%Eq^HU)>pefa0cwvQemJ&fp=MY{aB6uA};d`Jg6l+=ol`cc%y)OKlR8s1omwN
zrxFzPI5U^2y^;WK!#Ipr{4jr^j_}$Pa8p0J1vqD23fAzZH&|LWO@3ni3dUm|#ivax
zcy!h!-Rn|97od|x1nz2%>+?EjcotzE#g-Ju(|-tFy|Rof4jnHca1A+vbL6a$D#3h;
ztzI8^mf7X%++gK-0*7bh<R;-wrsua*K6y&$(g~itu5RhWJ;Pa;-MC3`j>P>P<y(^1
z`RO!l=cJCkORvGR%v*WEgLoRc1(;W|&FKVBp6{MZ&$hjJ!s|`n*Fj#FO-p$6Fi$tb
zkAL%m2k~imYLP+XVe33<<u`00UV^9Tu(ixlsbjxEK>_b&`O&=KK|K8sLCWj=K%@G=
zi-+$jrKFPxZ!ijvWtKU%$@y*!<5Opy$S0qXclCicSlO&}Jf1EB3>2enB}aHG7$*(c
zxN;xatPMOkLrS27Nd-VFJ);Jpv)6I}xPOBF7)L|4Rrz6(;&@sW28OEC=hs<KEdkta
z_Xo~G$0s%zsuSpk{sgX;@~rv5akQ(dJilp_L+6JTAfH4zp2|$%Q)9=<+F{P>5m!&k
z{35ovA1k|pcBy=2QoIaz7>}c6F?7DqI0BRVtjA}dtx~bG6bqi9y`Ttfalce5#ecVE
zd|nE9F~81b_#(T%@C0;r(PLN+fm-NeKCk7p0kRKy#4ci9%&+?kprHN2Xn`|jy}~Dg
zje+p?<~D6(>j1Y!9?0ihK>YCPG5GBv4B<p1mgnPH4D+bqw101lWpvPPI~KYG6a7ez
zH^?Ixhw+rhpI>^z-yysxEIl=v>|9qnZ;Pt1Wqt?SD#2P6``8Y4^rMSN$hTj5duS_Y
z2WSrnZ%Ot`s-gBB<maD%(4d<b0>fi?43FWl7#_o8cnpul@EG2Ip+7^#vNWs{UuXaT
N002ovPDHLkV1n<4R9XN4

diff --git a/src/index.html b/src/index.html
index 172026e1cd..469824a91f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -81,14 +81,14 @@
             <div id="dataflash_wrapper_global">
                 <div class="noflash_global" align="center" i18n="sensorDataFlashNotFound"></div>
                 <ul class="dataflash-contents_global">
+                    <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
                     <li class="dataflash-free_global">
-                        <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
                     </li>
                 </ul>
                 <div id="expertMode" align="center">
                     <label>
                         <input name="expertModeCheckbox" class="togglesmall" type="checkbox"/>
-                        <span i18n="expertMode"></span>
+                        <span i18n="expertMode" class="expertModeText"></span>
                     </label>
                 </div>
             </div>
diff --git a/src/js/browserMain.js b/src/js/browserMain.js
index 24afa7f278..38e680b854 100644
--- a/src/js/browserMain.js
+++ b/src/js/browserMain.js
@@ -38,7 +38,6 @@ import "../css/tabs/transponder.less";
 import "../css/tabs/privacy_policy.less";
 import "../css/tabs/options.less";
 import "../css/opensans_webfontkit/fonts.css";
-import "../css/dropdown-lists/css/style_lists.css";
 import "switchery-latest/dist/switchery.min.css";
 import "../css/switchery_custom.less";
 import "@fortawesome/fontawesome-free/css/all.css";
diff --git a/src/js/gui.js b/src/js/gui.js
index 4893d3e4c9..22bda5348e 100644
--- a/src/js/gui.js
+++ b/src/js/gui.js
@@ -256,7 +256,7 @@ class GuiControl {
     }
     switchery() {
 
-        const COLOR_ACCENT = 'var(--accent)';
+        const COLOR_ACCENT = 'var(--primary-500)';
         const COLOR_SWITCHERY_SECOND = 'var(--switcherysecond)';
 
         $('.togglesmall').each(function (index, elem) {
diff --git a/src/js/main.js b/src/js/main.js
index 5315f1b8e9..4f283baad0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -218,9 +218,19 @@ function startProcess() {
         }
     });
 
-    if (GUI.isCordova()) {
-        UI_PHONES.init();
-    }
+    // break into mobile UI at the same breakpoint as the CSS, not only for Cordova
+    // use window.matchMedia
+    const mediaQuery = window.matchMedia('(max-width: 576px)');
+    const handleMediaChange = function(e) {
+        if (e.matches) {
+            console.log('Using mobile UI');
+            UI_PHONES.init();
+        } else {
+            console.log('Using desktop UI');
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    handleMediaChange(mediaQuery);
 
     const ui_tabs = $('#tabs > ul');
     $('a', ui_tabs).click(function () {
diff --git a/src/js/tabs/cli.js b/src/js/tabs/cli.js
index 69b3a04530..91e6c8c3b2 100644
--- a/src/js/tabs/cli.js
+++ b/src/js/tabs/cli.js
@@ -331,9 +331,14 @@ cli.adaptPhones = function() {
         $('.backdrop').css('height', `calc(100% - ${backdropHeight}px)`);
     }
 
-    if (GUI.isCordova()) {
-        UI_PHONES.initToolbar();
-    }
+    const mediaQuery = window.matchMedia('(max-width: 576px)');
+    const handleMediaChange = function(e) {
+        if (e.matches) {
+            UI_PHONES.initToolbar();
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    handleMediaChange(mediaQuery);
 };
 
 cli.history = {
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index b5f17e65e4..106178b851 100644
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -3106,7 +3106,7 @@ osd.initialize = function(callback) {
 
                         if (field.variants && field.variants.length > 0) {
 
-                            const selectVariant = $('<select class="osd-variant" />')
+                            const selectVariant = $('<select class="osd-variant small" />')
                                 .data('field', field)
                                 .on("change", function() {
                                     const fieldChanged = $(this).data('field');
diff --git a/src/js/tabs/receiver.js b/src/js/tabs/receiver.js
index ff13f36209..c3308a4439 100644
--- a/src/js/tabs/receiver.js
+++ b/src/js/tabs/receiver.js
@@ -510,7 +510,7 @@ receiver.initialize = function (callback) {
 
         $("a.sticks").on("click", function() {
             const windowWidth = 370;
-            const windowHeight = 510;
+            const windowHeight = 550;
 
             const rxFunction = function(channels) {
                 if (CONFIGURATOR.connectionValid && GUI.active_tab !== 'cli') {
diff --git a/src/js/tabs/vtx.js b/src/js/tabs/vtx.js
index 22791e398f..0e35b2a635 100644
--- a/src/js/tabs/vtx.js
+++ b/src/js/tabs/vtx.js
@@ -82,9 +82,14 @@ vtx.initialize = function (callback) {
         // translate to user-selected language
         i18n.localizePage();
 
-        if (GUI.isCordova()) {
-            UI_PHONES.initToolbar();
-        }
+        const mediaQuery = window.matchMedia('(max-width: 576px)');
+        const handleMediaChange = function(e) {
+            if (e.matches) {
+                UI_PHONES.initToolbar();
+            }
+        };
+        mediaQuery.addEventListener('change', handleMediaChange);
+        handleMediaChange(mediaQuery);
 
         self.updating = false;
         GUI.content_ready(callback);
diff --git a/src/tabs/adjustments.html b/src/tabs/adjustments.html
index 2411083a02..4240af7ce5 100644
--- a/src/tabs/adjustments.html
+++ b/src/tabs/adjustments.html
@@ -1,4 +1,4 @@
-<div class="tab-adjustments toolbar_fixed_bottom">
+<div class="tab-adjustments">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabAdjustments"></div>
         <div class="cf_doc_version_bt">
@@ -21,10 +21,10 @@
             </table>
         </div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="adjustmentsSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="adjustmentsSave"></a>
     </div>
 </div>
 
diff --git a/src/tabs/auxiliary.html b/src/tabs/auxiliary.html
index 260208f034..514a646285 100644
--- a/src/tabs/auxiliary.html
+++ b/src/tabs/auxiliary.html
@@ -1,4 +1,4 @@
-<div class="tab-auxiliary toolbar_fixed_bottom">
+<div class="tab-auxiliary">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabAuxiliary">tabAuxiliary</div>
         <div class="cf_doc_version_bt">
@@ -17,10 +17,10 @@
 
         <div class="modes"></div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="auxiliaryButtonSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="auxiliaryButtonSave"></a>
     </div>
 </div>
 <div id="tab-auxiliary-templates">
diff --git a/src/tabs/cli.html b/src/tabs/cli.html
index 25f213806c..cde9d19915 100644
--- a/src/tabs/cli.html
+++ b/src/tabs/cli.html
@@ -1,9 +1,9 @@
-<div class="tab-cli toolbar_fixed_bottom">
+<div class="tab-cli">
     <div class="content_wrapper">
         <div class="note">
             <p i18n="cliInfo"></p>
         </div>
-        
+
         <div class="backdrop">
             <div class="window">
                 <div class="wrapper"></div>
@@ -11,7 +11,10 @@
         </div>
         <textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea>
     </div>
-    <div class="content_toolbar xs-compressed">
+    <div class="content_toolbar xs-compressed toolbar_fixed_bottom">
+        <div class="toolbar_expand_btn" nbrow="2">
+            <em class="fas fa-ellipsis-h"></em>
+        </div>
         <div class="btn save_btn">
             <a class="save" href="#" i18n="cliSaveToFileBtn"></a>
         </div>
@@ -29,10 +32,6 @@
         </div>
     </div>
 
-    <div class="toolbar_expand_btn" nbrow="2">
-        <em class="fas fa-ellipsis-h"></em>
-    </div>
-
     <!-- Snippet preview dialog -->
     <div id="snippetpreviewcontent" style="display: none">
         <div class="note">
diff --git a/src/tabs/configuration.html b/src/tabs/configuration.html
index 1285949aea..56f2f26fb4 100644
--- a/src/tabs/configuration.html
+++ b/src/tabs/configuration.html
@@ -1,4 +1,4 @@
-<div class="tab-configuration toolbar_fixed_bottom">
+<div class="tab-configuration">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabConfiguration"></div>
         <div class="cf_doc_version_bt">
@@ -8,10 +8,9 @@
             <p i18n="configurationFeaturesHelp"></p>
         </div>
 
-        <div class="grid-row">
-
-            <div class="grid-col col6">
+        <div class="grid-row grid-box col2">
 
+            <div class="col-span-1">
                 <!-- SYSTEM CONFIGURATION -->
                 <div class="systemconfig">
                     <div class="gui_box grey">
@@ -36,31 +35,28 @@
                                 <span i18n="configurationPidProcessDenom"></span>
                                 <div class="helpicon cf_tip" i18n_title="configurationPidProcessDenomHelp"></div>
                             </div>
-                            <div class="hardwareSelection">
-                                <div class="select">
-                                    <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
-                                        <input type="checkbox" id="accHardwareSwitch" class="toggle" />
-                                    </div>
-                                    <span class="freelabel" i18n="configurationAccHardware"></span>
+                            <div class="select">
+                                <div>
+                                    <input type="checkbox" id="accHardwareSwitch" class="toggle" />
                                 </div>
-                                <div class="select">
-                                    <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
-                                        <input type="checkbox" id="baroHardwareSwitch" class="toggle" />
-                                    </div>
-                                    <span class="freelabel" i18n="configurationBaroHardware"></span>
+                                <span class="freelabel" i18n="configurationAccHardware"></span>
+                            </div>
+                            <div class="select">
+                                <div>
+                                    <input type="checkbox" id="baroHardwareSwitch" class="toggle" />
                                 </div>
-                                <div class="select">
-                                    <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
-                                        <input type="checkbox" id="magHardwareSwitch" class="toggle" />
-                                    </div>
-                                    <span class="freelabel" i18n="configurationMagHardware"></span>
+                                <span class="freelabel" i18n="configurationBaroHardware"></span>
+                            </div>
+                            <div class="select">
+                                <div>
+                                    <input type="checkbox" id="magHardwareSwitch" class="toggle" />
                                 </div>
+                                <span class="freelabel" i18n="configurationMagHardware"></span>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- END SYSTEM CONFIGURATION-->
-
                 <!-- PERSONALIZATION-->
                 <div class="gui_box grey miscSettings">
                     <div class="gui_box_titlebar">
@@ -81,7 +77,6 @@
                         </div>
                     </div>
                 </div> <!-- END PERSONALIZATION-->
-
                 <!-- CAMERA -->
                 <div class="gui_box grey miscSettings accelNeeded">
                     <div class="gui_box_titlebar">
@@ -96,7 +91,6 @@
                     </div>
                 </div>
                 <!-- END CAMERA -->
-
                 <!-- MAXIMUM ARMING ANGLE-->
                 <div class="gui_box grey accelNeeded">
                     <div class="gui_box_titlebar">
@@ -127,7 +121,6 @@
                     </div>
                 </div>
                 <!-- END MAXIMUM ARMING ANGLE-->
-
                 <!-- OTHER FEATURES -->
                 <div class="featuresOther">
                     <div class="gui_box grey">
@@ -155,9 +148,7 @@
                 </div>
                 <!-- END OTHER FUTURES-->
             </div> <!-- END grid-col col6 -->
-
-            <div class="grid-col col6">
-
+            <div class="col-span-1">
                 <!-- BOARD ORIENTATION -->
                 <div class="board acc">
                     <div class="gui_box grey">
@@ -174,7 +165,6 @@
                                         <span i18n="configurationBoardAlignmentRoll"></span>
                                     </label>
                                 </div>
-
                                 <div class="board_align_inputs">
                                     <div class="alignicon pitch"></div>
                                     <label>
@@ -182,7 +172,6 @@
                                         <span i18n="configurationBoardAlignmentPitch"></span>
                                     </label>
                                 </div>
-
                                 <div class="board_align_inputs">
                                     <div class="alignicon yaw"></div>
                                     <label>
@@ -256,7 +245,6 @@
                         </div>
                     </div>
                 </div>
-
                 <!-- ACCELEROMETER TRIM -->
                 <div class="gui_box grey accelNeeded">
                     <div class="gui_box_titlebar">
@@ -275,7 +263,6 @@
                         </div>
                     </div>
                 </div> <!-- END ACCELEROMETER TRIM -->
-
                 <!-- DSHOT BEEPER -->
                 <div class="dshotBeeper">
                     <div class="gui_box grey">
@@ -319,7 +306,6 @@
                         </div>
                     </div>
                 </div>
-
                 <div class="beepers">
                     <!-- BEEPER -->
                     <div class="beepers">
@@ -352,11 +338,12 @@
             </div>
         </div>
 
-        <div class="content_toolbar">
-            <div class="btn save_btn">
-                <a class="save" href="#" i18n="configurationButtonSave"></a>
-            </div>
-        </div>
 
     </div>
 </div>
+
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="configurationButtonSave"></a>
+    </div>
+</div>
diff --git a/src/tabs/failsafe.html b/src/tabs/failsafe.html
index a3568e5f2d..08af9a5176 100644
--- a/src/tabs/failsafe.html
+++ b/src/tabs/failsafe.html
@@ -1,4 +1,4 @@
-<div class="tab-failsafe toolbar_fixed_bottom">
+<div class="tab-failsafe">
     <div class="content_wrapper">
         <div i18n="tabFailsafe" class="tab_title"></div>
         <div class="cf_doc_version_bt">
@@ -7,8 +7,8 @@
         <div class="note">
                 <p i18n="failsafeFeaturesHelpNew"></p>
         </div>
-        <div class="grid-row">
-            <div class="grid-col col6">
+        <div class="grid-row grid-box col2">
+            <div class="col-span-1">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="failsafePulsrangeTitle"></div>
@@ -39,7 +39,7 @@
                     </div>
                 </div>
             </div>
-            <div class="grid-col col6">
+            <div class="col-span-1">
                 <div class="gui_box grey failsafe_switch">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="failsafeSwitchTitle"></div>
@@ -53,8 +53,8 @@
                                     <option value="1" i18n="failsafeSwitchOptionKill"></option>
                                 </select>
                                 <span i18n="failsafeSwitchModeItem"></span>
-                                <div class="helpicon cf_tip" i18n_title="failsafeSwitchModeHelp"></div>
                             </label>
+                            <div class="helpicon cf_tip" i18n_title="failsafeSwitchModeHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -217,9 +217,9 @@
             </div>
         </div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="configurationButtonSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="configurationButtonSave"></a>
     </div>
 </div>
diff --git a/src/tabs/firmware_flasher.html b/src/tabs/firmware_flasher.html
index 9e6a97455a..c7e7ab76aa 100644
--- a/src/tabs/firmware_flasher.html
+++ b/src/tabs/firmware_flasher.html
@@ -1,4 +1,4 @@
-<div class="tab-firmware_flasher toolbar_fixed_bottom">
+<div class="tab-firmware_flasher">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabFirmwareFlasher"></div>
         <div class="cf_doc_version_bt">
@@ -6,288 +6,264 @@
         </div>
         <div class="tab_sponsor">
         </div>
-        <div class="options gui_box" style="float: left; width: 460px; ">
-            <div class="spacer" style="margin-bottom: 10px;">
-                <div class="margin-bottom">
-                <table class="cf_table" style="margin-top: 10px;">
-                    <tr class="expert_mode option">
-                        <td>
-                            <label>
-                                <input class="expert_mode toggle" type="checkbox" />
-                                <span i18n="expertMode"></span>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="expertModeDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="option">
-                        <td>
-                            <label>
-                                <input class="show_development_releases toggle" type="checkbox" />
-                                <span i18n="firmwareFlasherShowDevelopmentReleases"></span>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherShowDevelopmentReleasesDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="build_type">
-                        <td>
-                            <select name="build_type">
-                                <!-- options generated at runtime -->
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBuildType"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="board-select">
-                            <select name="board">
-                                <option value="0" i18n="firmwareFlasherOptionLoading">Loading ...</option>
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBoardDescription"></div>
-                        </td>
-                        <td class="board-description">
-                            <div class="btn default_btn">
-                                <a class="detect-board" href="#" i18n="firmwareFlasherDetectBoardButton"></a>
-                            </div>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBoardHint"></div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <select name="firmware_version">
-                                <option value="0" i18n="firmwareFlasherOptionLoading">Loading ...</option>
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectFirmwareVersionDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="expertOptions option">
-                        <td>
-                            <label>
-                                <input class="updating toggle" type="checkbox" />
-                                <span i18n="firmwareFlasherNoReboot"></span>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherNoRebootDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="expertOptions option flash_on_connect_wrapper">
-                        <td>
-                            <label>
-                                <input class="flash_on_connect toggle" type="checkbox" />
-                                <span i18n="firmwareFlasherFlashOnConnect"></span>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherFlashOnConnectDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="expertOptions option">
-                        <td>
-                            <label>
-                                <input class="erase_chip toggle" type="checkbox" />
-                                <span i18n="firmwareFlasherFullChipErase"></span>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherFullChipEraseDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                    <tr class="expertOptions option manual_baud_rate noboarder">
-                        <td>
-                            <label>
-                                <input class="flash_manual_baud toggle" type="checkbox" />
-                                <span i18n="firmwareFlasherManualBaud"></span>
-                                <select id="flash_manual_baud_rate" i18n_title="firmwareFlasherBaudRate">
-                                    <option value="921600">921600</option>
-                                    <option value="460800">460800</option>
-                                    <option value="256000" selected="selected">256000</option>
-                                    <option value="230400">230400</option>
-                                    <option value="115200">115200</option>
-                                    <option value="57600">57600</option>
-                                    <option value="38400">38400</option>
-                                    <option value="28800">28800</option>
-                                    <option value="19200">19200</option>
+        <div class="grid-box col3">
+            <div class="options gui_box col-span-1">
+                <div class="spacer">
+                    <div>
+                    <table class="cf_table" >
+                        <tr class="expert_mode option">
+                            <td>
+                                <label>
+                                    <input class="expert_mode toggle" type="checkbox" />
+                                    <span i18n="expertMode"></span>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="expertModeDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="option">
+                            <td>
+                                <label>
+                                    <input class="show_development_releases toggle" type="checkbox" />
+                                    <span i18n="firmwareFlasherShowDevelopmentReleases"></span>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherShowDevelopmentReleasesDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="build_type">
+                            <td>
+                                <select name="build_type">
+                                    <!-- options generated at runtime -->
                                 </select>
-                            </label>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherManualBaudDescription"></div>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-                </table>
-                </div>
-
-            </div>
-        </div>
-        <div class="gui_box gui_warning" style="max-width: calc(100% - 470px); float: right;">
-            <div class="gui_box_titlebar">
-                <div class="spacer_box_title" style="text-align: center;"
-                    i18n="warningTitle">
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBuildType"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="board-select">
+                                <div class="select-wrapper">
+                                    <select name="board">
+                                        <option value="0" i18n="firmwareFlasherOptionLoading">Loading ...</option>
+                                    </select>
+                                    <a href="#" class="detect-board disabled cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBoardDescription">
+                                        <span><div i18n="firmwareFlasherDetectBoardButton"></div><em class="fas fa-search"></em></span>
+                                    </a>
+                                </div>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBoardHint"></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <select name="firmware_version">
+                                    <option value="0" i18n="firmwareFlasherOptionLoading">Loading ...</option>
+                                </select>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectFirmwareVersionDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="expertOptions option">
+                            <td>
+                                <label>
+                                    <input class="updating toggle" type="checkbox" />
+                                    <span i18n="firmwareFlasherNoReboot"></span>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherNoRebootDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="expertOptions option flash_on_connect_wrapper">
+                            <td>
+                                <label>
+                                    <input class="flash_on_connect toggle" type="checkbox" />
+                                    <span i18n="firmwareFlasherFlashOnConnect"></span>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherFlashOnConnectDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="expertOptions option">
+                            <td>
+                                <label>
+                                    <input class="erase_chip toggle" type="checkbox" />
+                                    <span i18n="firmwareFlasherFullChipErase"></span>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherFullChipEraseDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr class="expertOptions option manual_baud_rate noboarder">
+                            <td>
+                                <label>
+                                    <input class="flash_manual_baud toggle" type="checkbox" />
+                                    <span i18n="firmwareFlasherManualBaud"></span>
+                                    <select id="flash_manual_baud_rate" i18n_title="firmwareFlasherBaudRate">
+                                        <option value="921600">921600</option>
+                                        <option value="460800">460800</option>
+                                        <option value="256000" selected="selected">256000</option>
+                                        <option value="230400">230400</option>
+                                        <option value="115200">115200</option>
+                                        <option value="57600">57600</option>
+                                        <option value="38400">38400</option>
+                                        <option value="28800">28800</option>
+                                        <option value="19200">19200</option>
+                                    </select>
+                                </label>
+                                <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherManualBaudDescription"></div>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                    </table>
+                    </div>
                 </div>
             </div>
-            <div class="spacer" style="margin-bottom: 10px;">
-                <p i18n="firmwareFlasherWarningText"></p>
-                <br />
-                <p i18n="firmwareFlasherTargetWarning"></p>
-            </div>
-        </div>
-
-        <div class="clear-both"></div>
-
-        <div class="build_configuration gui_box" style="position: relative;">
-            <div class="darkgrey_box gui_box_titlebar">
-                <div class="build_configuration_toggle_wrapper">
-                    <label id="build_configuration_toggle_label">
-                        <input class="corebuild_mode toggle" type="checkbox" name="coreBuildModeCheckbox" />
-                        <span id="build_configuration_toggle_label_text" i18n="coreBuild"></span>
-                    </label>
-                    <div class="helpicon cf_tip_wide" i18n_title="coreBuildModeDescription"></div>
+            <div class="gui_box gui_warning col-span-2">
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" i18n="warningTitle">
+                    </div>
                 </div>
-                <div class="spacer_box_title" style="text-align: center;" i18n="firmwareFlasherBuildConfigurationHead">
+                <div class="spacer">
+                    <p i18n="firmwareFlasherWarningText"></p>
+                    <br />
+                    <p i18n="firmwareFlasherTargetWarning"></p>
                 </div>
             </div>
-            <div class="spacer hide-in-core-build-mode" style="margin-bottom: 10px;">
-                <div class="margin-bottom">
-                    <div style="width: 49%; float: left;">
-                        <strong i18n="firmwareFlasherBuildRadioProtocols"></strong>
-                        <div id="radioProtocolInfo" class="build-options-wrapper">
-                            <select id="radioProtocols" name="radioProtocols" class="select2">
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherRadioProtocolDescription"></div>
-                        </div>
+            <div class="build_configuration gui_box col-span-3">
+                <div class="darkgrey_box gui_box_titlebar">
+                    <div class="build_configuration_toggle_wrapper">
+                        <label id="build_configuration_toggle_label">
+                            <input class="corebuild_mode toggle" type="checkbox" name="coreBuildModeCheckbox" />
+                            <span id="build_configuration_toggle_label_text" i18n="coreBuild"></span>
+                        </label>
+                        <div class="helpicon cf_tip_wide" i18n_title="coreBuildModeDescription"></div>
                     </div>
-                    <div style="width: 49%; float: right;">
-                        <strong i18n="firmwareFlasherBuildTelemetryProtocols"></strong>
-                        <div id="telemetryProtocolInfo" class="build-options-wrapper">
-                            <select id="telemetryProtocols" name="telemetryProtocols" class="select2">
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherTelemetryProtocolDescription"></div>
-                        </div>
+                    <div class="spacer_box_title" i18n="firmwareFlasherBuildConfigurationHead">
                     </div>
                 </div>
-            </div>
-            <div class="spacer hide-in-core-build-mode" style="margin-bottom: 10px;">
-                <div class="margin-bottom">
-                    <div style="width: 49%; float: left;">
-                        <strong i18n="firmwareFlasherBuildOptions"></strong>
-                        <div id="optionsInfo" class="build-options-wrapper">
-                            <select id="options" name="options" multiple="multiple" class="select2">
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOptionsDescription"></div>
-                        </div>
-                    </div>
-                    <div style="width: 49%; float: right;">
-                        <strong i18n="firmwareFlasherBuildMotorProtocols"></strong>
-                        <div id="motorProtocolInfo" class="build-options-wrapper">
-                            <select id="motorProtocols" name="motorProtocols" class="select2">
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherMotorProtocolDescription"></div>
+                <div class="grid-box col1">
+                    <div class="spacer hide-in-core-build-mode">
+                        <div class="grid-box col2">
+                            <div class="select-group">
+                                <strong i18n="firmwareFlasherBuildRadioProtocols"></strong>
+                                <div id="radioProtocolInfo" class="build-options-wrapper">
+                                    <select id="radioProtocols" name="radioProtocols" class="select2">
+                                    </select>
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherRadioProtocolDescription"></div>
+                                </div>
+                            </div>
+                            <div class="select-group">
+                                <strong i18n="firmwareFlasherBuildTelemetryProtocols"></strong>
+                                <div id="telemetryProtocolInfo" class="build-options-wrapper">
+                                    <select id="telemetryProtocols" name="telemetryProtocols" class="select2">
+                                    </select>
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherTelemetryProtocolDescription"></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div class="expertOptions spacer hide-in-core-build-mode" style="margin-bottom: 10px;">
-                <div class="margin-bottom">
-                    <div style="width: 49%; float: left;">
-                        <strong i18n="firmwareFlasherBuildCustomDefines"></strong>
-                        <div id="customDefinesInfo" class="build-options-wrapper">
-                            <input id="customDefines" name="customDefines">
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherCustomDefinesDescription"></div>
+                    <div class="spacer hide-in-core-build-mode">
+                        <div class="grid-box col2">
+                            <div class="select-group">
+                                <strong i18n="firmwareFlasherBuildOptions"></strong>
+                                <div id="optionsInfo" class="build-options-wrapper">
+                                    <select id="options" name="options" multiple="multiple" class="select2">
+                                    </select>
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOptionsDescription"></div>
+                                </div>
+                            </div>
+                            <div class="select-group">
+                                <strong i18n="firmwareFlasherBuildMotorProtocols"></strong>
+                                <div id="motorProtocolInfo" class="build-options-wrapper">
+                                    <select id="motorProtocols" name="motorProtocols" class="select2">
+                                    </select>
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherMotorProtocolDescription"></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="commitSelection" style="width: 49%; float: right;">
-                        <strong i18n="firmwareFlasherBranch"></strong>
-                        <div id="branchInfo" class="build-options-wrapper">
-                            <select id="commits" name="commits" class="select2">
-                            </select>
-                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherBranchDescription"></div>
+                    <div class="expertOptions spacer hide-in-core-build-mode">
+                        <div class="grid-box col2">
+                            <div class="select-group">
+                                <strong i18n="firmwareFlasherBuildCustomDefines"></strong>
+                                <div id="customDefinesInfo" class="build-options-wrapper">
+                                    <input id="customDefines" name="customDefines">
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherCustomDefinesDescription"></div>
+                                </div>
+                            </div>
+                            <div class="commitSelection select-group">
+                                <strong i18n="firmwareFlasherBranch"></strong>
+                                <div id="branchInfo" class="build-options-wrapper">
+                                    <select id="commits" name="commits" class="select2">
+                                    </select>
+                                    <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherBranchDescription"></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="release_info gui_box">
-            <div class="darkgrey_box gui_box_titlebar">
-                <div class="spacer_box_title" style="text-align: center;" i18n="firmwareFlasherReleaseSummaryHead">
+            <div class="release_info gui_box col-span-3">
+                <div class="darkgrey_box gui_box_titlebar">
+                    <div class="spacer_box_title" i18n="firmwareFlasherReleaseSummaryHead">
+                    </div>
                 </div>
-            </div>
-            <div class="spacer" style="margin-bottom: 10px;">
-                <div class="margin-bottom">
-                    <strong i18n="firmwareFlasherReleaseTarget"></strong>
-                    <span class="target"></span>
-                    <div class="board_support">
-                        <div class="btn default_btn">
-                            <a id="targetSupportInfoUrl" href="#" target="_blank" i18n="betaflightSupportButton"></a>
+                <div class="spacer">
+                    <div>
+                        <strong i18n="firmwareFlasherReleaseTarget"></strong>
+                        <span class="target"></span>
+                        <div class="board_support">
+                            <div class="btn default_btn">
+                                <a id="targetSupportInfoUrl" href="#" target="_blank" i18n="betaflightSupportButton"></a>
+                            </div>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherTargetWikiUrlInfo"></div>
                         </div>
-                        <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherTargetWikiUrlInfo"></div>
-                    </div>
-                    <div id="manufacturerInfo">
-                        <strong i18n="firmwareFlasherReleaseManufacturer"></strong>
-                        <span id="manufacturer"></span>
+                        <div id="manufacturerInfo">
+                            <strong i18n="firmwareFlasherReleaseManufacturer"></strong>
+                            <span id="manufacturer"></span>
+                            <br />
+                        </div>
+                        <strong i18n="firmwareFlasherReleaseVersion"></strong>
+                        <a i18n_title="firmwareFlasherReleaseVersionUrl" class="name" href="#" target="_blank"></a>
+                        <br />
+                        <strong i18n="firmwareFlasherReleaseMCU"></strong>
+                        <span id="targetMCU"></span>
                         <br />
+                        <strong i18n="firmwareFlasherReleaseDate"></strong>
+                        <span class="date"></span>
+                        <br />
+                        <strong i18n="firmwareFlasherConfigurationFile"></strong>
+                        <span class="configFilename"></span>
                     </div>
-                    <strong i18n="firmwareFlasherReleaseVersion"></strong>
-                    <a i18n_title="firmwareFlasherReleaseVersionUrl" class="name" href="#" target="_blank"></a>
-                    <br />
-                    <strong i18n="firmwareFlasherReleaseMCU"></strong>
-                    <span id="targetMCU"></span>
-                    <br />
-                    <strong i18n="firmwareFlasherReleaseDate"></strong>
-                    <span class="date"></span>
-                    <br />
-                    <strong i18n="firmwareFlasherConfigurationFile"></strong>
-                    <span class="configFilename"></span>
-                </div>
-                <div id="cloudTargetInfo">
-                    <strong i18n="firmwareFlasherCloudBuildDetails"></strong>
-                    <a i18n_title="firmwareFlasherCloudBuildLogUrl" id="cloudTargetLog" href="#" target="_blank"></a>
-                    <br />
-                    <strong i18n="firmwareFlasherCloudBuildStatus"></strong>
-                    <progress class="buildProgress" value="0" min="0" max="100"></progress>
-                    <span id="cloudTargetStatus"></span>
-                    <br />
-                    <div class="btn default_btn">
-                        <a class="cloud_build_cancel disabled" href="#" i18n="cancel"></a>
+                    <div id="cloudTargetInfo">
+                        <strong i18n="firmwareFlasherCloudBuildDetails"></strong>
+                        <a i18n_title="firmwareFlasherCloudBuildLogUrl" id="cloudTargetLog" href="#" target="_blank"></a>
+                        <br />
+                        <strong i18n="firmwareFlasherCloudBuildStatus"></strong>
+                        <progress class="buildProgress" value="0" min="0" max="100"></progress>
+                        <span id="cloudTargetStatus"></span>
+                        <br />
+                        <div class="btn default_btn">
+                            <a class="cloud_build_cancel disabled" href="#" i18n="cancel"></a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="gui_box gui_note">
-            <div class="gui_box_titlebar">
-                <div class="spacer_box_title" style="text-align: center;"
-                    i18n="firmwareFlasherRecoveryHead">
+            <div class="gui_box gui_note col-span-3">
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" i18n="firmwareFlasherRecoveryHead"></div>
+                </div>
+                <div class="spacer">
+                    <p i18n="firmwareFlasherRecoveryText"></p>
                 </div>
             </div>
-            <div class="spacer" style="margin-bottom: 10px;">
-                <p i18n="firmwareFlasherRecoveryText"></p>
-            </div>
-        </div>
-    </div>
-    <div class="content_toolbar">
-        <div class="info"><a name="progressbar"></a>
-            <progress class="progress" value="0" min="0" max="100"></progress>
-            <span class="progressLabel"></span>
-        </div>
-        <div class="btn">
-            <a class="exit_dfu disabled" href="#" i18n="firmwareFlasherExitDfu"></a>
-        </div>
-        <div class="btn">
-            <a class="flash_firmware disabled" href="#progressbar" i18n="firmwareFlasherFlashFirmware"></a>
-        </div>
-        <div class="btn">
-            <a class="load_remote_file disabled" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
-        </div>
-        <div class="btn">
-            <a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
         </div>
     </div>
 
@@ -320,3 +296,22 @@ <h3 i18n="warningTitle"></h3>
         </div>
     </dialog>
 </div>
+
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="info"><a name="progressbar"></a>
+        <progress class="progress" value="0" min="0" max="100"></progress>
+        <span class="progressLabel"></span>
+    </div>
+    <div class="btn">
+        <a class="exit_dfu disabled" href="#" i18n="firmwareFlasherExitDfu"></a>
+    </div>
+    <div class="btn">
+        <a class="flash_firmware disabled" href="#progressbar" i18n="firmwareFlasherFlashFirmware"></a>
+    </div>
+    <div class="btn">
+        <a class="load_remote_file disabled" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
+    </div>
+    <div class="btn">
+        <a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
+    </div>
+</div>
diff --git a/src/tabs/gps.html b/src/tabs/gps.html
index 3ae4751555..f9cfce2b78 100755
--- a/src/tabs/gps.html
+++ b/src/tabs/gps.html
@@ -1,12 +1,12 @@
-<div class="tab-gps toolbar_fixed_bottom">
+<div class="tab-gps">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabGPS">GPS</div>
         <div class="cf_doc_version_bt">
             <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
         </div>
 
-        <div class="grid-row">
-            <div class="grid-col col5">
+        <div class="grid-row grid-box col5">
+            <div class="col-span-2">
                 <div class="gui_box grey gps">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="configurationGPS"></div>
@@ -14,7 +14,7 @@
                     </div>
                     <div class="spacer_box">
                         <div class="gps_config">
-                            <div style="float:left; width:100%;">
+                            <div>
                                 <div class="select line">
                                     <select class="gps_protocol">
                                         <!-- list generated here -->
@@ -68,7 +68,6 @@
                         </div>
                     </div>
                 </div>
-
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="gpsSignalStrHead"></div>
@@ -83,7 +82,7 @@
                 </div>
             </div>
 
-            <div class="grid-col col7">
+            <div class="col-span-3">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="gpsHead"></div>
@@ -126,20 +125,18 @@
                         </table>
                     </div>
                 </div>
-
                 <div class="gui_box grey gps_map">
-                    <div class="gui_box_titlebar" style="margin-bottom: 0px;">
+                    <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="gpsMapHead"></div>
                     </div>
                     <div id="connect" i18n="gpsMapMessage1">
-                        <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
+                        <div class="default_btn"><a id="check">retry</a></div>
                     </div>
                     <div id="waiting">
                         <div class="info" i18n="gpsMapMessage2"></div>
                     </div>
                     <div id="loadmap">
                         <div id="map" class="map"> </div>
-
                         <div class="controls">
                             <button id="Hybrid">H</button>
                             <button id="Satellite">S</button>
@@ -152,10 +149,11 @@
             </div>
         </div>
 
-        <div class="content_toolbar">
-            <div class="btn save_btn">
-                <a class="save" href="#" i18n="configurationButtonSave"></a>
-            </div>
-        </div>
+    </div>
+</div>
+
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="configurationButtonSave"></a>
     </div>
 </div>
diff --git a/src/tabs/led_strip.html b/src/tabs/led_strip.html
index e62010fb1c..0ec77fbaa5 100644
--- a/src/tabs/led_strip.html
+++ b/src/tabs/led_strip.html
@@ -1,4 +1,4 @@
-<div class="tab-led-strip toolbar_fixed_bottom">
+<div class="tab-led-strip">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabLedStrip"></div>
         <div class="cf_doc_version_bt">
@@ -82,7 +82,7 @@
                     <input type="checkbox" name="LarsonScanner" class="toggle function-o" />
                     <label> <span i18n="ledStripLarsonOverlay"></span></label>
                 </div>
-                
+
                 <div class="checkbox">
                     <input type="checkbox" name="blink" class="toggle function-b" />
                     <label> <span i18n="ledStripBlinkAlwaysOverlay"></span></label>
@@ -235,9 +235,9 @@
 
         <div class="clear-both"></div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="ledStripButtonSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="ledStripButtonSave"></a>
     </div>
 </div>
diff --git a/src/tabs/motors.html b/src/tabs/motors.html
index ef1f74247e..e5590b1ac6 100644
--- a/src/tabs/motors.html
+++ b/src/tabs/motors.html
@@ -1,12 +1,12 @@
-<div class="tab-motors toolbar_fixed_bottom">
+<div class="tab-motors">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabMotorTesting">Motors</div>
         <div class="cf_doc_version_bt">
             <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
         </div>
 
-        <div class="grid-row">
-            <div class="grid-col col6">
+        <div class="grid-row grid-box col2">
+            <div class="col-span-1">
 
                 <div class="configuration">
 
@@ -194,7 +194,7 @@
                 <!-- END CONFIGURATION -->
 
             </div>
-            <div class="grid-col col6">
+            <div class="col-span-1">
 
                 <!-- MOTOR TEST SECTION -->
                 <div class="gui_box motorblock">
@@ -202,123 +202,112 @@
 
                     <!-- SENSOR GRAPH SECTION -->
                     <div class="gui_box grey">
-                        <div class="wrapper modelAndGraph">
-                            <svg id="graph">
-                            <g class="grid x" transform="translate(40, 120)"></g>
-                            <g class="grid y" transform="translate(40, 10)"></g>
-                            <g class="data" transform="translate(41, 10)"></g>
-                            <g class="axis x" transform="translate(40, 120)"></g>
-                            <g class="axis y" transform="translate(40, 10)"></g>
-                        </svg>
-
-                        <div class="plot_control">
-                            <div class="table">
-                                <div class="sensor row">
-                                    <div class="left-cell motor-button">
-                                        <a class="reset_max" href="#" i18n="motorsResetMaximumButton" i18n_title="motorsResetMaximum"></a>
-                                    </div>
-                                    <div class="right-cell">
-                                        <select name="sensor_choice">
-                                            <option value="gyro" selected="selected" i18n="motorsSensorGyroSelect"></option>
-                                            <option value="accel" i18n="motorsSensorAccelSelect"></option>
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="row-container">
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            <div i18n="sensorsRefresh"></div>
-                                        </div>
-                                        <div class="rate right-cell">
-                                            <select name="rate">
-                                                <option value="10">10 ms</option>
-                                                <option value="20">20 ms</option>
-                                                <option value="30">30 ms</option>
-                                                <option value="40">40 ms</option>
-                                                <option value="50">50 ms</option>
-                                                <option value="100">100 ms</option>
-                                                <option value="250">250 ms</option>
-                                                <option value="500">500 ms</option>
-                                                <option value="1000">1000 ms</option>
-                                            </select>
-                                        </div>
-                                    </div>
-
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            <div i18n="sensorsScale"></div>
+                        <div class="wrapper modelAndGraph grid-box col4">
+                            <svg id="graph" class="col-span-3">
+                                <g class="grid x" transform="translate(40, 120)"></g>
+                                <g class="grid y" transform="translate(40, 10)"></g>
+                                <g class="data" transform="translate(41, 10)"></g>
+                                <g class="axis x" transform="translate(40, 120)"></g>
+                                <g class="axis y" transform="translate(40, 10)"></g>
+                            </svg>
+                            <div class="plot_control col-span-1">
+                                <div class="table">
+                                    <div class="sensor row">
+                                        <div class="left-cell motor-button">
+                                            <a class="reset_max" href="#" i18n="motorsResetMaximumButton" i18n_title="motorsResetMaximum"></a>
                                         </div>
-                                        <div class="scale right-cell">
-                                            <select name="scale">
+                                        <div class="right-cell">
+                                            <select name="sensor_choice">
+                                                <option value="gyro" selected="selected" i18n="motorsSensorGyroSelect"></option>
+                                                <option value="accel" i18n="motorsSensorAccelSelect"></option>
                                             </select>
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            X:
-                                        </div>
-                                        <div class="x value right-cell">
-                                            0
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            Y:
+                                    <div class="row-container">
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                <div i18n="sensorsRefresh"></div>
+                                            </div>
+                                            <div class="rate right-cell">
+                                                <select name="rate">
+                                                    <option value="10">10 ms</option>
+                                                    <option value="20">20 ms</option>
+                                                    <option value="30">30 ms</option>
+                                                    <option value="40">40 ms</option>
+                                                    <option value="50">50 ms</option>
+                                                    <option value="100">100 ms</option>
+                                                    <option value="250">250 ms</option>
+                                                    <option value="500">500 ms</option>
+                                                    <option value="1000">1000 ms</option>
+                                                </select>
+                                            </div>
                                         </div>
-                                        <div class="y value right-cell">
-                                            0
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                <div i18n="sensorsScale"></div>
+                                            </div>
+                                            <div class="scale right-cell">
+                                                <select name="scale">
+                                                </select>
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            Z:
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                X:
+                                            </div>
+                                            <div class="x value right-cell">
+                                                0
+                                            </div>
                                         </div>
-                                        <div class="z value right-cell">
-                                            0
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                Y:
+                                            </div>
+                                            <div class="y value right-cell">
+                                                0
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="left-cell">
-                                            RMS:
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                Z:
+                                            </div>
+                                            <div class="z value right-cell">
+                                                0
+                                            </div>
                                         </div>
-                                        <div class="rms value right-cell">
-                                            0
+                                        <div class="row">
+                                            <div class="left-cell">
+                                                RMS:
+                                            </div>
+                                            <div class="rms value right-cell">
+                                                0
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-
                         <div class="power_info">
                             <span i18n="motorsVoltage" class="power_text"></span><span class="motors-bat-voltage power_value"></span>
                             <span i18n="motorsADrawing" class="power_text"></span><span class="motors-bat-mah-drawing power_value"></span>
                             <span i18n="motorsmAhDrawn" class="power_text"></span><span class="motors-bat-mah-drawn power_value"></span>
                         </div>
-
                     </div>
-                </div>
-                <!-- END SENSOR GRAPH -->
-                <!-- MOTOR TESTING -->
-                <div class="left motors">
-                    <div class="title2" i18n="motorsText"></div>
-                        <ul class="titles">
-                        <li i18n_title="motorNumber1">1</li>
-                        <li i18n_title="motorNumber2">2</li>
-                        <li i18n_title="motorNumber3">3</li>
-                        <li i18n_title="motorNumber4">4</li>
-                        <li i18n_title="motorNumber5">5</li>
-                        <li i18n_title="motorNumber6">6</li>
-                        <li i18n_title="motorNumber7">7</li>
-                        <li i18n_title="motorNumber8">8</li>
-                    </ul>
-                    <div class="bar-wrapper"></div>
-                </div>
-                <div class="clear-both"></div>
-                <!-- MOTOR TESTING -->
-                <div class="motor_testing">
-                    <div class="left">
-                        <div class="telemetry">
-                            <ul>
+                        <div class="motors">
+                            <ul class="grid-box col9 titles">
+                                <li i18n_title="motorNumber1">1</li>
+                                <li i18n_title="motorNumber2">2</li>
+                                <li i18n_title="motorNumber3">3</li>
+                                <li i18n_title="motorNumber4">4</li>
+                                <li i18n_title="motorNumber5">5</li>
+                                <li i18n_title="motorNumber6">6</li>
+                                <li i18n_title="motorNumber7">7</li>
+                                <li i18n_title="motorNumber8">8</li>
+                            </ul>
+                            <div class="bar-wrapper grid-box col9"></div>
+                        </div>
+                        <div class="motor_testing">
+                            <ul class="grid-box col9 telemetry">
                                 <li><span class="motor-0 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                 <li><span class="motor-1 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                 <li><span class="motor-2 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
@@ -329,20 +318,20 @@
                                 <li><span class="motor-7 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                 <li><span class="motor-master cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                             </ul>
-                        </div>
-                        <div class="sliders">
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
-                            <input type="range" min="1000" max="2000" value="1000" disabled="disabled" class="master"/>
-                        </div>
-                        <div class="values">
-                            <ul>
+                            <div class="sliders">
+                                <ul class="grid-box col9">
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
+                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled" class="master"/>
+                                </ul>
+                            </div>
+                            <ul class="grid-box col9 values">
                                 <li>1000</li>
                                 <li>1000</li>
                                 <li>1000</li>
@@ -354,8 +343,7 @@
                                 <li style="font-weight: bold" i18n="motorsMaster"></li>
                             </ul>
                         </div>
-                    </div>
-                    <div class="notice">
+                    <div class="danger">
                         <p i18n="motorsNotice"></p>
                         <input id="motorsEnableTestMode" type="checkbox" class="togglesmall"/>
                         <span class="motorsEnableTestMode" i18n="motorsEnableControl"></span>
@@ -370,15 +358,18 @@
 
         <div class="clear-both"></div>
 
-        <div class="content_toolbar">
-            <div class="btn">
-                <a class="save disabled" href="#" i18n="motorsButtonSave"></a>
-                <a class="stop disabled" href="#" i18n="escDshotDirectionDialog-StopWizard"></a>
-            </div>
-        </div>
 
     </div> <!-- END CONTENT_WRAPPER -->
 
+    <div class="content_toolbar toolbar_fixed_bottom">
+        <div class="btn">
+            <a class="save disabled" href="#" i18n="motorsButtonSave"></a>
+        </div>
+        <div class="btn">
+            <a class="stop disabled" href="#" i18n="escDshotDirectionDialog-StopWizard"></a>
+        </div>
+    </div>
+
     <dialog id="dialog-mixer-reset">
         <div id="dialog-mixer-reset-content-wrapper">
             <div id="dialog-mixer-reset-content"></div>
diff --git a/src/tabs/onboard_logging.html b/src/tabs/onboard_logging.html
index 8b89a8e120..c435439a64 100644
--- a/src/tabs/onboard_logging.html
+++ b/src/tabs/onboard_logging.html
@@ -10,150 +10,150 @@
         <div class="require-blackbox-maybe-supported note">
             <p i18n="blackboxMaybeSupported"></p>
         </div>
-        <div class="require-blackbox-supported">
-            <div class="gui_box grey require-blackbox-config-supported">
-                <div class="gui_box_titlebar">
-                    <div class="spacer_box_title" i18n="blackboxConfiguration"></div>
-                </div>
-                <div class="spacer_box">
-                    <div class="line blackboxDevice">
-                        <select name="blackbox_device">
-                        </select>
-                        <span i18n="onboardLoggingBlackbox"></span>
-                    </div>
-                    <div class="line blackboxRate">
-                        <select name="blackbox_rate">
-                        </select>
-                        <span i18n="onboardLoggingRateOfLogging"></span>
-                    </div>
-                    <div class="line blackboxDebugMode">
-                        <select name="blackboxDebugMode">
-                        </select>
-                        <span class="blackboxDebugModeText" i18n="onboardLoggingDebugMode"></span>
-                    </div>
-                    <div class="line blackboxDebugFields">
-                        <select name="blackboxDebugFields" multiple="multiple"></select>
-                        <span i18n="onboardLoggingDebugFields"></span>
+        <div class="grid-box col1">
+            <div class="require-blackbox-supported grid-box col1">
+                <div class="gui_box grey require-blackbox-config-supported">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="blackboxConfiguration"></div>
                     </div>
-                    <div class="line">
-                        <a href="#" class="save-settings regular-button" i18n="blackboxButtonSave"></a>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="gui_box grey">
-                <div class="gui_box_titlebar" align="left">
-                    <div class="spacer_box_title" i18n="onboardLoggingSerialLogger">
-                    </div>
-                </div>
-                <div class="spacer_box">
-                    <p i18n="serialLoggingSupportedNote"></p>
-                </div>
-            </div>
-            
-            <div class="gui_box grey require-dataflash-supported">
-                <div class="gui_box_titlebar" align="left">
-                    <div class="spacer_box_title" i18n="onboardLoggingFlashLogger">
-                    </div>
-                </div>
-                <div class="spacer_box">
-                    <div class="require-dataflash-supported">
-                        <p i18n="dataflashNote"></p>
-                        
-                        <dialog class="dataflash-confirm-erase">
-                            <h3 i18n="dataflashConfirmEraseTitle"></h3>
-                            <div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote"></div>
-                            <div class="dataflash-erase-progress">
-                                <div class="data-loading">
-                                    <p i18n="onboardLoggingEraseInProgress"></p>
-                                </div>
-                            </div>
-                            <div class="buttons">
-                                <a href="#" class="erase-flash-confirm regular-button" i18n="dataflashButtonEraseConfirm"></a>
-                                <a href="#" class="erase-flash-cancel regular-button" i18n="dataflashButtonEraseCancel"></a> 
-                            </div>
-                        </dialog>
-                        
-                        <dialog class="dataflash-saving">
-                            <h3 i18n="dataflashSavingTitle"></h3>
-                            <div class="dataflash-saving-before">
-                                <div i18n="dataflashSavingNote"></div>
-                                <progress value="0" min="0" max="100"></progress>
-                                <div class="buttons">
-                                    <a href="#" class="save-flash-cancel regular-button" i18n="dataflashButtonSaveCancel"></a>
-                                </div>
-                            </div>
-                            <div class="dataflash-saving-after">
-                                <div i18n="dataflashSavingNoteAfter"></div>
-                                <div class="buttons">
-                                    <a href="#" class="save-flash-dismiss regular-button" i18n="dataflashButtonSaveDismiss"></a>
-                                </div>
-                            </div>
-                        </dialog>
-                        
-                        <ul class="dataflash-contents">
-                            <li class="dataflash-used">
-                                <div class="legend"></div>
-                            </li>
-                            <li class="dataflash-free">
-                                <div class="legend"></div>
-                            </li>
-                        </ul>
-                        
-                        <div class="dataflash-buttons">
-                            <a class="regular-button erase-flash" href="#" i18n="dataflashButtonErase"></a>
-                            <a class="regular-button require-msc-not-supported save-flash" href="#" i18n="dataflashButtonSaveFile"></a>
-                            <a class="regular-button require-msc-supported save-flash" href="#"><span i18n="dataflashButtonSaveFileDeprecated"></span><span class="helpicon cf_tip" i18n_title="dataflashSaveFileDepreciationHint"></span></a>
-                            <p i18n="dataflashSavetoFileNote"></p>
+                    <div class="spacer_box">
+                        <div class="line blackboxDevice">
+                            <select name="blackbox_device">
+                            </select>
+                            <span i18n="onboardLoggingBlackbox"></span>
+                        </div>
+                        <div class="line blackboxRate">
+                            <select name="blackbox_rate">
+                            </select>
+                            <span i18n="onboardLoggingRateOfLogging"></span>
+                        </div>
+                        <div class="line blackboxDebugMode">
+                            <select name="blackboxDebugMode">
+                            </select>
+                            <span class="blackboxDebugModeText" i18n="onboardLoggingDebugMode"></span>
+                        </div>
+                        <div class="line blackboxDebugFields">
+                            <select name="blackboxDebugFields" multiple="multiple"></select>
+                            <span i18n="onboardLoggingDebugFields"></span>
+                        </div>
+                        <div class="line">
+                            <a href="#" class="save-settings regular-button" i18n="blackboxButtonSave"></a>
                         </div>
                     </div>
-                    
-                    <p class="require-dataflash-not-present" i18n="dataflashNotPresentNote"></p>
-                    <p class="require-dataflash-unsupported" i18n="dataflashFirmwareUpgradeRequired"></p>
                 </div>
-            </div>
-            <div class="require-sdcard-supported">
+
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar" align="left">
-                        <div class="spacer_box_title" i18n="onboardLoggingOnboardSDCard">
+                        <div class="spacer_box_title" i18n="onboardLoggingSerialLogger">
                         </div>
                     </div>
                     <div class="spacer_box">
-                        <div class="sdcard">
-                            <div class="sdcard-icon"></div>
-                            <div class="sdcard-status"></div>
+                        <p i18n="serialLoggingSupportedNote"></p>
+                    </div>
+                </div>
+
+                <div class="gui_box grey require-dataflash-supported">
+                    <div class="gui_box_titlebar" align="left">
+                        <div class="spacer_box_title" i18n="onboardLoggingFlashLogger">
                         </div>
+                    </div>
+                    <div class="spacer_box">
+                        <div class="require-dataflash-supported">
+                            <p i18n="dataflashNote"></p>
+
+                            <dialog class="dataflash-confirm-erase">
+                                <h3 i18n="dataflashConfirmEraseTitle"></h3>
+                                <div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote"></div>
+                                <div class="dataflash-erase-progress">
+                                    <div class="data-loading">
+                                        <p i18n="onboardLoggingEraseInProgress"></p>
+                                    </div>
+                                </div>
+                                <div class="buttons">
+                                    <a href="#" class="erase-flash-confirm regular-button" i18n="dataflashButtonEraseConfirm"></a>
+                                    <a href="#" class="erase-flash-cancel regular-button" i18n="dataflashButtonEraseCancel"></a>
+                                </div>
+                            </dialog>
+
+                            <dialog class="dataflash-saving">
+                                <h3 i18n="dataflashSavingTitle"></h3>
+                                <div class="dataflash-saving-before">
+                                    <div i18n="dataflashSavingNote"></div>
+                                    <progress value="0" min="0" max="100"></progress>
+                                    <div class="buttons">
+                                        <a href="#" class="save-flash-cancel regular-button" i18n="dataflashButtonSaveCancel"></a>
+                                    </div>
+                                </div>
+                                <div class="dataflash-saving-after">
+                                    <div i18n="dataflashSavingNoteAfter"></div>
+                                    <div class="buttons">
+                                        <a href="#" class="save-flash-dismiss regular-button" i18n="dataflashButtonSaveDismiss"></a>
+                                    </div>
+                                </div>
+                            </dialog>
 
-                        <p i18n="sdcardNote"></p>
-                            
-                        <div class="require-sdcard-ready">
-                            <ul class="sdcard-contents">
-                                <li class="sdcard-other">
+                            <ul class="dataflash-contents">
+                                <li class="dataflash-used">
                                     <div class="legend"></div>
                                 </li>
-                                <li class="sdcard-free">
+                                <li class="dataflash-free">
                                     <div class="legend"></div>
                                 </li>
                             </ul>
+
+                            <div class="dataflash-buttons">
+                                <a class="regular-button erase-flash" href="#" i18n="dataflashButtonErase"></a>
+                                <a class="regular-button require-msc-not-supported save-flash" href="#" i18n="dataflashButtonSaveFile"></a>
+                                <a class="regular-button require-msc-supported save-flash" href="#"><span i18n="dataflashButtonSaveFileDeprecated"></span><span class="helpicon cf_tip" i18n_title="dataflashSaveFileDepreciationHint"></span></a>
+                                <p i18n="dataflashSavetoFileNote"></p>
+                            </div>
                         </div>
+
+                        <p class="require-dataflash-not-present" i18n="dataflashNotPresentNote"></p>
+                        <p class="require-dataflash-unsupported" i18n="dataflashFirmwareUpgradeRequired"></p>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div class="gui_box grey require-msc-supported">
-            <div class="gui_box_titlebar" align="left">
-                <div class="spacer_box_title" i18n="onboardLoggingMsc">
+                <div class="require-sdcard-supported">
+                    <div class="gui_box grey">
+                        <div class="gui_box_titlebar" align="left">
+                            <div class="spacer_box_title" i18n="onboardLoggingOnboardSDCard">
+                            </div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="sdcard">
+                                <div class="sdcard-icon"></div>
+                                <div class="sdcard-status"></div>
+                            </div>
+                            <p i18n="sdcardNote"></p>
+
+                            <div class="require-sdcard-ready">
+                                <ul class="sdcard-contents">
+                                    <li class="sdcard-other">
+                                        <div class="legend"></div>
+                                    </li>
+                                    <li class="sdcard-free">
+                                        <div class="legend"></div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="spacer_box">
-                <div class="require-msc-supported">
-                    <div>
-                        <a class="require-msc-ready regular-button onboardLoggingRebootMsc" href="#" i18n="onboardLoggingRebootMscText"></a>
+            <div class="gui_box grey require-msc-supported">
+                <div class="gui_box_titlebar" align="left">
+                    <div class="spacer_box_title" i18n="onboardLoggingMsc">
                     </div>
                 </div>
-                <p i18n="onboardLoggingMscNote"></p>
-
-                <p class="require-msc-not-ready" i18n="onboardLoggingMscNotReady"></p>
+                <div class="spacer_box">
+                    <div class="require-msc-supported">
+                        <div>
+                            <a class="require-msc-ready regular-button onboardLoggingRebootMsc" href="#" i18n="onboardLoggingRebootMscText"></a>
+                        </div>
+                    </div>
+                    <p i18n="onboardLoggingMscNote"></p>
+                    <p class="require-msc-not-ready" i18n="onboardLoggingMscNotReady"></p>
+                </div>
             </div>
         </div>
         <div class="clear-both"></div>
diff --git a/src/tabs/options.html b/src/tabs/options.html
index 7be3397f5d..86178167e5 100644
--- a/src/tabs/options.html
+++ b/src/tabs/options.html
@@ -1,5 +1,5 @@
 <div class="tab-options">
-    <div class="content_wrapper">
+    <div class="content_wrapper grid-box col1">
         <div class="gui_box">
             <div class="gui_box_titlebar">
                 <div class="spacer_box_title" i18n="tabOptions"></div>
diff --git a/src/tabs/osd.html b/src/tabs/osd.html
index 36bf24d661..ba0d6c19f5 100644
--- a/src/tabs/osd.html
+++ b/src/tabs/osd.html
@@ -1,215 +1,213 @@
-<div class="tab-osd toolbar_fixed_bottom">
-        <div class="content_wrapper">
-            <h1 class="tab_title">
-                <span i18n="osdSetupTitle"></span>
-            </h1>
-            <div class="cf_doc_version_bt">
-                <a id="button-documentation" href="" target="_blank"></a>
-            </div>
-            <div class="noOsdChipDetect hide">
-                <p class="note" i18n="osdSetupNoOsdChipDetectWarning"></p>
-            </div>
-            <div class="unsupported hide">
-                <p class="note" i18n="osdSetupUnsupportedNote1"></p>
-                <p class="note" i18n="osdSetupUnsupportedNote2"></p>
+<div class="tab-osd">
+    <div class="content_wrapper">
+        <h1 class="tab_title">
+            <span i18n="osdSetupTitle"></span>
+        </h1>
+        <div class="cf_doc_version_bt">
+            <a id="button-documentation" href="" target="_blank"></a>
+        </div>
+        <div class="noOsdChipDetect hide">
+            <p class="note" i18n="osdSetupNoOsdChipDetectWarning"></p>
+        </div>
+        <div class="unsupported hide">
+            <p class="note" i18n="osdSetupUnsupportedNote1"></p>
+            <p class="note" i18n="osdSetupUnsupportedNote2"></p>
+        </div>
+        <div class="supported hide">
+            <div style="margin-bottom: 10px;">
+                <p class="note" i18n="osdSetupPreviewHelp"></p>
             </div>
-            <div class="supported hide">
-                <div style="margin-bottom: 10px;">
-                    <p class="note" i18n="osdSetupPreviewHelp"></p>
-                </div>
-                <div class="grid-row">
-                    <div class="grid-col elements requires-osd-feature osd-feature">
-                        <div class="gui_box grey">
-                            <div class="gui_box_titlebar" style="margin-bottom: 0px;">
-                                <div class="spacer_box_title">
-                                    <span class="osd-profiles-header cf_tip" i18n_title="osdSetupProfilesTitle" >
-                                        <!--  Generated profiles header here -->
-                                    </span>
-                                    <span i18n="osdSetupElementsTitle"></span>
-                                </div>
-                            </div>
-                            <div class="spacer_box">
-                                <div id="element-fields" class="switchable-fields"></div>
+            <div class="grid-row grid-box col4">
+                <div class="col-span-1 elements requires-osd-feature osd-feature">
+                    <div class="gui_box grey">
+                        <div class="gui_box_titlebar" style="margin-bottom: 0px;">
+                            <div class="spacer_box_title">
+                                <span class="osd-profiles-header cf_tip" i18n_title="osdSetupProfilesTitle" >
+                                    <!--  Generated profiles header here -->
+                                </span>
+                                <span i18n="osdSetupElementsTitle"></span>
                             </div>
                         </div>
+                        <div class="spacer_box">
+                            <div id="element-fields" class="switchable-fields"></div>
+                        </div>
                     </div>
-                    <div class="grid-col osd-preview">
-                        <div class="gui_box grey preview requires-osd-feature">
+                </div>
+                <div class="col-span-2 osd-preview">
+                    <div class="gui_box grey preview-parent requires-osd-feature">
 
-                            <div class="gui_box_titlebar image">
-                                <div class="spacer_box_title">
-                               <span class="cf_tip" i18n_title="osdSetupPreviewForTitle">
-                                   <label id="osdprofile-selector-label" i18n="osdSetupPreviewSelectProfileTitle"></label>
-                                   <select class="osdprofile-selector">
-                                       <!--  Populated at runtime -->
-                                   </select>
-                                   <label id="osdprofile-selector-font" i18n="osdSetupPreviewSelectFont"></label>
-                                   <select class="osdfont-selector">
-                                       <!-- Populated at runtime -->
-                                   </select>
-                                   <span class="osd-preview-zoom-group">
-                                       <input type="checkbox" id="osd-preview-zoom-selector" class="osd-preview-zoom-selector"/>
-                                       <label for="osd-preview-zoom-selector" i18n="osdSetupPreviewCheckZoom" />
-                                   </span>
-                               </span>
-                                </div>
+                        <div class="gui_box_titlebar image">
+                            <div class="spacer_box_title">
+                                <span class="cf_tip" i18n_title="osdSetupPreviewForTitle">
+                                    <label id="osdprofile-selector-label" i18n="osdSetupPreviewSelectProfileTitle"></label>
+                                    <select class="osdprofile-selector small">
+                                        <!--  Populated at runtime -->
+                                    </select>
+                                    <label id="osdprofile-selector-font" i18n="osdSetupPreviewSelectFont"></label>
+                                    <select class="osdfont-selector small">
+                                        <!-- Populated at runtime -->
+                                    </select>
+                                    <span class="osd-preview-zoom-group">
+                                        <input type="checkbox" id="osd-preview-zoom-selector" class="osd-preview-zoom-selector"/>
+                                        <label for="osd-preview-zoom-selector" i18n="osdSetupPreviewCheckZoom" />
+                                    </span>
+                                </span>
                             </div>
+                        </div>
 
-                            <div class="display-layout">
-                                <div class="preview">
-                                </div>
+                        <div class="display-layout">
+                            <div class="preview">
                             </div>
+                        </div>
 
-                            <div class="gui_box_bottombar">
-                                <div class="spacer_box_title">
-                                    <span i18n="osdSetupPreviewTitle"></span>
-                                </div>
+                        <div class="gui_box_bottombar">
+                            <div class="spacer_box_title">
+                                <span i18n="osdSetupPreviewTitle"></span>
                             </div>
+                        </div>
 
+                    </div>
+                </div>
+                <div class="col-span-1 osd-profile">
+                    <div class="gui_box osdprofile-selected-container grey">
+                        <div class="gui_box_titlebar cf_tip">
+                            <div class="spacer_box_title" i18n="osdSetupSelectedProfileTitle"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <label i18n="osdSetupSelectedProfileLabel"></label>
+                            <select class="osdprofile-active">
+                                <!--  Populated at runtime -->
+                            </select>
                         </div>
                     </div>
-                    <div class="grid-col osd-profile">
-                        <div class="gui_box osdprofile-selected-container grey">
-                            <div class="gui_box_titlebar cf_tip">
-                                <div class="spacer_box_title" i18n="osdSetupSelectedProfileTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <label i18n="osdSetupSelectedProfileLabel"></label>
-                                <select class="osdprofile-active">
-                                    <!--  Populated at runtime -->
-                                </select>
-                            </div>
+                    <div class="gui_box videomode-container grey requires-max7456">
+                        <div class="gui_box_titlebar cf_tip">
+                            <div class="spacer_box_title" i18n="osdSetupVideoFormatTitle"></div>
                         </div>
-                        <div class="gui_box videomode-container grey requires-max7456">
-                            <div class="gui_box_titlebar cf_tip">
-                                <div class="spacer_box_title" i18n="osdSetupVideoFormatTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="video-types"></div>
-                            </div>
+                        <div class="spacer_box">
+                            <div class="video-types"></div>
                         </div>
-                        <div class="gui_box grey units-container requires-osd-feature" style="display:none;">
-                            <div class="gui_box_titlebar cf_tip">
-                                <div class="spacer_box_title" i18n="osdSetupUnitsTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="units"></div>
-                            </div>
+                    </div>
+                    <div class="gui_box grey units-container requires-osd-feature" style="display:none;">
+                        <div class="gui_box_titlebar cf_tip">
+                            <div class="spacer_box_title" i18n="osdSetupUnitsTitle"></div>
                         </div>
-                        <div class="gui_box grey timers-container requires-osd-feature" style="display:none;">
-                            <div class="gui_box_titlebar cf_tip" style="margin-bottom: 0px;">
-                                <div class="spacer_box_title" i18n="osdSetupTimersTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div id="timer-fields" class="switchable-fields"></div>
-                            </div>
+                        <div class="spacer_box">
+                            <div class="units"></div>
                         </div>
-                        <div class="gui_box grey alarms-container requires-osd-feature" style="display:none;">
-                            <div class="gui_box_titlebar cf_tip">
-                                <div class="spacer_box_title" i18n="osdSetupAlarmsTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="alarms"></div>
-                            </div>
+                    </div>
+                    <div class="gui_box grey timers-container requires-osd-feature" style="display:none;">
+                        <div class="gui_box_titlebar cf_tip" style="margin-bottom: 0px;">
+                            <div class="spacer_box_title" i18n="osdSetupTimersTitle"></div>
                         </div>
-                        <div class="gui_box grey warnings-container requires-osd-feature" style="display:none;">
-                            <div class="gui_box_titlebar cf_tip" style="margin-bottom: 0px;">
-                                <div class="spacer_box_title">
-                                    <div class="spacer_box_title" i18n="osdSetupWarningsTitle"></div>
-                                </div>
-                            </div>
-                            <div class="spacer_box">
-                                <div id="warnings-fields" class="switchable-fields"></div>
-                            </div>
+                        <div class="spacer_box">
+                            <div id="timer-fields" class="switchable-fields"></div>
                         </div>
-                        <div class="gui_box grey stats-container requires-osd-feature" style="display:none;">
-                            <div class="gui_box_titlebar"
-                                 style="margin-bottom: 0px;">
-                                <div class="spacer_box_title" i18n="osdSetupStatsTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div id="post-flight-stat-fields" class="switchable-fields"></div>
-                            </div>
+                    </div>
+                    <div class="gui_box grey alarms-container requires-osd-feature" style="display:none;">
+                        <div class="gui_box_titlebar cf_tip">
+                            <div class="spacer_box_title" i18n="osdSetupAlarmsTitle"></div>
                         </div>
-                        <div class="gui_box grey" style="display:none;">
-                            <div class="gui_box_titlebar">
-                                <div class="spacer_box_title" i18n="osdSetupVtxTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="vtx-settings"></div>
-                            </div>
+                        <div class="spacer_box">
+                            <div class="alarms"></div>
                         </div>
-                        <div class="gui_box grey" style="display:none;">
-                            <div class="gui_box_titlebar">
-                                <div class="spacer_box_title" i18n="osdSetupCraftNameTitle"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="callsign"></div>
+                    </div>
+                    <div class="gui_box grey warnings-container requires-osd-feature" style="display:none;">
+                        <div class="gui_box_titlebar cf_tip" style="margin-bottom: 0px;">
+                            <div class="spacer_box_title">
+                                <div class="spacer_box_title" i18n="osdSetupWarningsTitle"></div>
                             </div>
                         </div>
+                        <div class="spacer_box">
+                            <div id="warnings-fields" class="switchable-fields"></div>
+                        </div>
                     </div>
-                </div>
-
-                <!-- Font Manager dialog -->
-                <div id="fontmanagercontent" style="display:none; width:720px;">
-                    <div class="font-picker" style="margin-bottom: 10px;">
-                        <h1 class="tab_title" i18n="osdSetupFontPresets"></h1>
-                        <!-- Font preview and list -->
-                        <label class="font-manager-version-info"></label>
-                        <div class="content_wrapper font-preview"></div>
-                        <div class="fontpresets_wrapper">
-                            <label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
-                            <select class="fontpresets">
-                                <option value="-1" disabled i18n="osdSetupFontPresetsSelectorCustomOption"></option>
-                                <!-- Other values populated at runtime -->
-                            </select>
-                            <span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
-                        </div>
-                        <!-- Boot logo setup -->
-                        <h1 class="tab_title" i18n="osdSetupCustomLogoTitle"></h1>
-                        <div class="grid-row">
-                            <div id="font-logo-preview-container" class="content_wrapper grid-col col6">
-                                <div id="font-logo-preview">
-                                    <!-- this will be resized at runtime -->
-                                </div>
-                            </div>
-                            <div id="font-logo-info grid-col col6">
-                                <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
-                                <ul>
-                                    <li id="font-logo-info-size" i18n="osdSetupCustomLogoInfoImageSize"></li>
-                                    <li id="font-logo-info-colors" i18n="osdSetupCustomLogoInfoColorMap"></li>
-                                </ul>
-                                <p id="font-logo-info-upload-hint" i18n="osdSetupCustomLogoInfoUploadHint"></p>
-                            </div>
+                    <div class="gui_box grey stats-container requires-osd-feature" style="display:none;">
+                        <div class="gui_box_titlebar"
+                                style="margin-bottom: 0px;">
+                            <div class="spacer_box_title" i18n="osdSetupStatsTitle"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div id="post-flight-stat-fields" class="switchable-fields"></div>
                         </div>
-                        <!-- Replace logo button -->
-                        <div class="default_btn" style="width:100%; float:left;">
-                            <a class="replace_logo" i18n="osdSetupCustomLogoOpenImageButton"></a>
+                    </div>
+                    <div class="gui_box grey" style="display:none;">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="osdSetupVtxTitle"></div>
                         </div>
-                        <!-- Upload progress bar -->
-                        <div class="info">
-                            <a name="progressbar"></a>
-                            <progress class="progress" value="0" min="0" max="100"></progress>
-                            <div class="progressLabel" style="margin-top: -21px; width: 95%; text-align: center; position: absolute;"></div>
+                        <div class="spacer_box">
+                            <div class="vtx-settings"></div>
                         </div>
                     </div>
-                    <!-- Upload button -->
-                    <div class="default_btn green" style="width:100%; float:left;
-                        ">
-                        <a class="flash_font active" i18n="osdSetupUploadFont"></a>
+                    <div class="gui_box grey" style="display:none;">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="osdSetupCraftNameTitle"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="callsign"></div>
+                        </div>
                     </div>
                 </div>
+            </div>
 
-                <div class="supported hide">
-                    <div class="content_toolbar" style="left:0;">
-                        <div class="btn">
-                            <a class="requires-max7456-font-device-detected fonts" id="fontmanager" href="#" i18n="osdSetupFontManager"></a>
-                        </div>
-                        <div class="btn save">
-                            <a class="active save" href="#" i18n="osdSetupSave"></a>
+            <!-- Font Manager dialog -->
+            <div id="fontmanagercontent" style="display:none; width:720px;">
+                <div class="font-picker" style="margin-bottom: 10px;">
+                    <h1 class="tab_title" i18n="osdSetupFontPresets"></h1>
+                    <!-- Font preview and list -->
+                    <label class="font-manager-version-info"></label>
+                    <div class="content_wrapper font-preview"></div>
+                    <div class="fontpresets_wrapper">
+                        <label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
+                        <select class="fontpresets">
+                            <option value="-1" disabled i18n="osdSetupFontPresetsSelectorCustomOption"></option>
+                            <!-- Other values populated at runtime -->
+                        </select>
+                        <span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
+                    </div>
+                    <!-- Boot logo setup -->
+                    <h1 class="tab_title" i18n="osdSetupCustomLogoTitle"></h1>
+                    <div class="grid-row">
+                        <div id="font-logo-preview-container" class="content_wrapper grid-col col6">
+                            <div id="font-logo-preview">
+                                <!-- this will be resized at runtime -->
+                            </div>
+                        </div>
+                        <div id="font-logo-info grid-col col6">
+                            <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
+                            <ul>
+                                <li id="font-logo-info-size" i18n="osdSetupCustomLogoInfoImageSize"></li>
+                                <li id="font-logo-info-colors" i18n="osdSetupCustomLogoInfoColorMap"></li>
+                            </ul>
+                            <p id="font-logo-info-upload-hint" i18n="osdSetupCustomLogoInfoUploadHint"></p>
                         </div>
                     </div>
+                    <!-- Replace logo button -->
+                    <div class="default_btn" style="width:100%; float:left;">
+                        <a class="replace_logo" i18n="osdSetupCustomLogoOpenImageButton"></a>
+                    </div>
+                    <!-- Upload progress bar -->
+                    <div class="info">
+                        <a name="progressbar"></a>
+                        <progress class="progress" value="0" min="0" max="100"></progress>
+                        <div class="progressLabel" style="margin-top: -21px; width: 95%; text-align: center; position: absolute;"></div>
+                    </div>
+                </div>
+                <!-- Upload button -->
+                <div class="default_btn green" style="width:100%; float:left;
+                    ">
+                    <a class="flash_font active" i18n="osdSetupUploadFont"></a>
                 </div>
             </div>
+
         </div>
     </div>
+</div>
+<div class="content_toolbar supported toolbar_fixed_bottom">
+    <div class="btn">
+        <a class="requires-max7456-font-device-detected fonts" id="fontmanager" href="#" i18n="osdSetupFontManager"></a>
+    </div>
+    <div class="btn save">
+        <a class="active save" href="#" i18n="osdSetupSave"></a>
+    </div>
+</div>
diff --git a/src/tabs/pid_tuning.html b/src/tabs/pid_tuning.html
index f36def7f67..be6dc62e03 100644
--- a/src/tabs/pid_tuning.html
+++ b/src/tabs/pid_tuning.html
@@ -1,4 +1,4 @@
-<div class="tab-pid_tuning toolbar_fixed_bottom">
+<div class="tab-pid_tuning">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabPidTuning"></div>
         <div class="cf_doc_version_bt">
@@ -39,7 +39,7 @@
                 <div class="default_btn copyrateprofilebtn">
                     <a href="#" id="copyRateProfile" i18n="pidTuningCopyRateProfile"></a>
                 </div>
-                <div class="default_btn resetbt">                    
+                <div class="default_btn resetbt">
                     <a href="#" id="resetPidProfile" i18n="pidTuningResetPidProfile"></a>
                 </div>
                 <div class="default_btn show showAllPids">
@@ -189,9 +189,9 @@
                                 </th>
                             </tr>
                         </table>
-    
+
                         <table class="sliderLabels">
-    
+
                             <tr class="baseSlider baseSliderDGain">
                                 <td>
                                     <span i18n="pidTuningDGainSlider"></span>
@@ -310,7 +310,7 @@
 
                          </table>
                     </div>
-                    
+
                     <div class="gui_box topspacer slidersWarning">
                         <p i18n="pidTuningSliderWarning"></p>
                     </div>
@@ -596,7 +596,7 @@
                                             <span i18n="pidTuningItermRelaxType"></span>
                                         </label>
                                     </span>
-                                    
+
                                     <span class="itermRelaxCutoff suboption">
                                         <input type="number" name="itermRelaxCutoff" step="1" min="1" max="50" />
                                         <label for="itermRelaxCutoff">
@@ -884,7 +884,7 @@
                             </tbody>
                         </table>
                     </div>
-                
+
                     <div class="note rates-tab-warning maxRateWarning">
                         <p i18n="pidTuningMaxRateWarning"></p>
                     </div>
@@ -1192,7 +1192,7 @@
                                     <select id="sliderGyroFilterModeSelect" class="sliderMode">
                                         <option value="0" i18n="pidTuningOptionOff"></option>
                                         <option value="1" i18n="pidTuningOptionOn"></option>
-                                    </select>    
+                                    </select>
                                 </td>
                             </tr>
                         </table>
@@ -1429,7 +1429,7 @@
                                     <select id="sliderDTermFilterModeSelect" class="sliderMode">
                                         <option value="0" i18n="pidTuningOptionOff"></option>
                                         <option value="1" i18n="pidTuningOptionOn"></option>
-                                    </select>    
+                                    </select>
                                 </td>
                             </tr>
                         </table>
@@ -1469,8 +1469,8 @@
                                         <span class="inputValue"><input type="number" name="dtermLowpassFrequency" step="1" min="1" max="16000"/></span>
                                         <label>
                                             <span i18n="pidTuningStaticCutoffFrequency"></span>
-                                        </label>    
-                                    </span>    
+                                        </label>
+                                    </span>
 
                                     <span class="suboption dynamic">
                                         <span class="inputValue"><input type="number" name="dtermLowpassDynMinFrequency" step="1" min="1" max="1000"/></span>
@@ -1478,14 +1478,14 @@
                                             <span i18n="pidTuningMinCutoffFrequency"></span>
                                         </label>
                                     </span>
- 
+
                                     <span class="suboption dynamic">
                                         <span class="inputValue"><input type="number" name="dtermLowpassDynMaxFrequency" step="1" min="1" max="1000"/></span>
                                         <label>
                                             <span i18n="pidTuningMaxCutoffFrequency"></span>
                                         </label>
                                     </span>
-                    
+
                                     <span class="suboption dynamic">
                                         <span class="inputValue"><input type="number" name="dtermLowpassExpo" step="1" min="1" max="10"/></span>
                                         <label>
@@ -1585,15 +1585,6 @@
         </div>
         <div class="clear-both"></div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn refresh_btn">
-            <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
-        </div>
-        <div class="btn save_btn">
-            <a class="update" href="#" i18n="pidTuningButtonSave"></a>
-        </div>
-    </div>
-
     <dialog class="dialogCopyProfile">
         <h3 i18n="dialogCopyProfileTitle"></h3>
         <div class="content">
@@ -1630,3 +1621,11 @@ <h3 i18n="dialogRatesTypeTitle"></h3>
         </div>
     </dialog>
 </div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn refresh_btn">
+        <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
+    </div>
+    <div class="btn save_btn">
+        <a class="update" href="#" i18n="pidTuningButtonSave"></a>
+    </div>
+</div>
diff --git a/src/tabs/ports.html b/src/tabs/ports.html
index 4eb5d9f5f9..ce8c21db8c 100644
--- a/src/tabs/ports.html
+++ b/src/tabs/ports.html
@@ -1,4 +1,4 @@
-<div class="tab-ports toolbar_fixed_bottom">
+<div class="tab-ports">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabPorts">Ports</div>
         <div class="cf_doc_version_bt">
@@ -32,10 +32,10 @@
             <p i18n="portsFirmwareUpgradeRequired"></p>
         </div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="configurationButtonSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="configurationButtonSave"></a>
     </div>
 </div>
 <div id="tab-ports-templates">
diff --git a/src/tabs/power.html b/src/tabs/power.html
index 2786b9b6c8..85a9ea0764 100644
--- a/src/tabs/power.html
+++ b/src/tabs/power.html
@@ -1,4 +1,4 @@
-<div class="tab-power toolbar_fixed_bottom">
+<div class="tab-power">
     <div class="content_wrapper">
         <!-- should be the first DIV on each tab -->
         <div class="cf_column">
@@ -8,8 +8,8 @@
             </div>
         </div>
 
-        <div class="grid-row">
-            <div class="grid-col col6">
+        <div class="grid-row grid-box col2">
+            <div class="col-span-1">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="powerBatteryHead"></div>
@@ -22,24 +22,6 @@
                         </table>
                     </div>
                 </div>
-            </div>
-            <div class="grid-col col6">
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="powerStateHead"></div>
-                    </div>
-                    <div class="spacer_box battery">
-                        <table border="0" cellpadding="0" cellspacing="0" class="cf_table">
-                            <tbody class="battery-state">
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="grid-row">
-            <div class="grid-col col6">
                 <div class="gui_box grey boxVoltageConfiguration">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="powerVoltageHead"></div>
@@ -56,10 +38,18 @@
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="grid-row">
-            <div class="grid-col col6">
+            <div class="col-span-1">
+                <div class="gui_box grey">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="powerStateHead"></div>
+                    </div>
+                    <div class="spacer_box battery">
+                        <table border="0" cellpadding="0" cellspacing="0" class="cf_table">
+                            <tbody class="battery-state">
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
                 <div class="gui_box grey boxAmperageConfiguration">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" i18n="powerAmperageHead"></div>
@@ -83,15 +73,15 @@
         </div>
     </div>
 
-    <div class="content_toolbar">
-        <div class="btn calibration">
-            <a class="calibrationmanager" id="calibrationmanager" href="#" i18n="powerCalibrationManagerButton"></a>
-        </div>
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="powerButtonSave"></a>
-        </div>
-
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn calibration">
+        <a class="calibrationmanager" id="calibrationmanager" href="#" i18n="powerCalibrationManagerButton"></a>
+    </div>
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="powerButtonSave"></a>
     </div>
+
 </div>
 
 <div id="tab-power-templates">
@@ -263,4 +253,4 @@
     <div class="default_btn">
         <a class="discardcalibration" id="discardcalibration" href="#" i18n="powerCalibrationDiscard"></a>
     </div>
-</div> 
+</div>
diff --git a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less
index 0ac7b59d1c..a5dd825801 100644
--- a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less
+++ b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less
@@ -5,12 +5,12 @@
 #presets_detailed_dialog_content_wrapper {
 	.preset_title_panel_title {
 		padding-bottom: .5ex;
-		border-bottom: 1px solid var(--accent);
+		border-bottom: 1px solid var(--primary-500);
 		margin-bottom: 2ex;
 	}
 	.ms-choice {
 		>span.placeholder {
-			color: var(--defaultText);
+			color: var(--text);
 		}
 	}
 	.left-panel {
@@ -90,7 +90,7 @@ ol {
 }
 #presets_options_panel {
 	.ms-choice {
-		border-color: var(--accentBorder);
+		border-color: var(--primary-500);
 		border-width: 2px;
 	}
 	height: 26px;
diff --git a/src/tabs/presets/SourcesDialog/SourcePanel.css b/src/tabs/presets/SourcesDialog/SourcePanel.css
index 58dd324fe3..54749d71e3 100644
--- a/src/tabs/presets/SourcesDialog/SourcePanel.css
+++ b/src/tabs/presets/SourcesDialog/SourcePanel.css
@@ -1,6 +1,6 @@
 .presets_source_panel {
-    background-color: var(--boxBackground);
-    border: 1px solid var(--subtleAccent);
+    background-color: var(--surface-200);
+    border: 1px solid var(--surface-500);
     padding: 1.5ex;
     box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.25);
     border-radius: 4px;
@@ -16,7 +16,7 @@
 }
 
 .presets_source_panel_not_selected:hover {
-    background-color: var(--subtleAccent);
+    background-color: var(--surface-500);
     box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.5);
 }
 
diff --git a/src/tabs/presets/SourcesDialog/SourcesDialog.css b/src/tabs/presets/SourcesDialog/SourcesDialog.css
index 660a72607d..e4c5234185 100644
--- a/src/tabs/presets/SourcesDialog/SourcesDialog.css
+++ b/src/tabs/presets/SourcesDialog/SourcesDialog.css
@@ -1,7 +1,7 @@
 
 .presets_sources_dialog_title_panel {
     padding-bottom: .5ex;
-    border-bottom: 1px solid var(--accent);
+    border-bottom: 1px solid var(--primary-500);
     margin-bottom: 2ex;
     font-size: 1.5em;
     font-weight: bold;
diff --git a/src/tabs/presets/TitlePanel/PresetTitlePanel.css b/src/tabs/presets/TitlePanel/PresetTitlePanel.css
index 65a320e849..2b4d2bbaf9 100644
--- a/src/tabs/presets/TitlePanel/PresetTitlePanel.css
+++ b/src/tabs/presets/TitlePanel/PresetTitlePanel.css
@@ -1,11 +1,11 @@
 .preset_title_panel {
-    color: var(--defaultText);
+    color: var(--text);
     position: relative;
 }
 
 .preset_title_panel_border {
-    background-color: var(--boxBackground);
-    border: 1px solid var(--subtleAccent);
+    background-color: var(--surface-200);
+    border: 1px solid var(--surface-500);
     cursor: pointer;
     padding: 1.5ex;
     box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.25);
@@ -52,7 +52,7 @@
 }
 
 .preset_title_panel_category {
-    color: var(--mutedText);
+    color: var(--surface-950);
     font-weight: bold;
 }
 
@@ -68,15 +68,15 @@
 }
 
 .preset_title_panel_status_official {
-    background-color: green;
+    background-color: var(--success-500);
 }
 
 .preset_title_panel_status_community {
-    background-color: var(--accent);
+    background-color: var(--primary-500);
 }
 
 .preset_title_panel_status_experimental {
-    background-color: red;
+    background-color: var(--error-500);
 }
 
 .preset_title_panel_versions_text {
@@ -114,5 +114,5 @@
 }
 
 .preset_title_panel_label {
-    color: var(--quietHeader);
+    color: var(--surface-800);
 }
diff --git a/src/tabs/presets/TitlePanel/PresetTitlePanel.js b/src/tabs/presets/TitlePanel/PresetTitlePanel.js
index a84ad15e05..b4ee23893a 100644
--- a/src/tabs/presets/TitlePanel/PresetTitlePanel.js
+++ b/src/tabs/presets/TitlePanel/PresetTitlePanel.js
@@ -33,17 +33,17 @@ export default class PresetTitlePanel
         let starMouseHover = false;
 
         if (this._clickable && this._mouseOnPanel && !this._mouseOnStar) {
-            this._domWrapperDiv.css({"background-color": "var(--subtleAccent)"});
+            this._domWrapperDiv.css({"background-color": "var(--surface-500)"});
         } else {
-            this._domWrapperDiv.css({"background-color": "var(--boxBackground)"});
+            this._domWrapperDiv.css({"background-color": "var(--surface-200)"});
         }
 
         if (this._mouseOnStar || (this._mouseOnPanel && this._clickable)) {
-            this._domStar.css({"background-color": "var(--subtleAccent)"});
+            this._domStar.css({"background-color": "var(--surface-500)"});
             starMouseHover = true;
         } else {
-            this._domWrapperDiv.css({"background-color": "var(--boxBackground)"});
-            this._domStar.css({"background-color": "var(--boxBackground)"});
+            this._domWrapperDiv.css({"background-color": "var(--surface-200)"});
+            this._domStar.css({"background-color": "var(--surface-200)"});
         }
 
         if (this._preset.lastPickDate) {
@@ -93,7 +93,7 @@ export default class PresetTitlePanel
         if (isPicked) {
             this._domWrapperDiv.css({"border": "2px solid green"});
         } else {
-            this._domWrapperDiv.css({"border": "1px solid var(--subtleAccent)"});
+            this._domWrapperDiv.css({"border": "1px solid var(--surface-500)"});
         }
     }
 
diff --git a/src/tabs/presets/presets.html b/src/tabs/presets/presets.html
index 5b5873cfa2..8b5beb630c 100644
--- a/src/tabs/presets/presets.html
+++ b/src/tabs/presets/presets.html
@@ -1,4 +1,4 @@
-<div class="tab-presets toolbar_fixed_bottom">
+<div class="tab-presets">
     <div class="content_wrapper" id="presets_content_wrapper">
         <div class="tab_title">
             <div i18n="tabPresets" class="presets_title_text"></div>
@@ -77,7 +77,7 @@ <h3 i18n="presetsLoadError"></h3>
         </div>
     </div>
 
-    <div class="content_toolbar">
+    <div class="content_toolbar toolbar_fixed_bottom">
         <div class="btn">
             <a href="#" id="presets_save_button" class="tool regular-button" i18n="presetsButtonSave"></a>
             <a href="#" id="presets_cancel_button" class="tool regular-button" i18n="presetsButtonCancel"></a>
diff --git a/src/tabs/presets/presets.js b/src/tabs/presets/presets.js
index 158bfdacce..ecdc79d933 100644
--- a/src/tabs/presets/presets.js
+++ b/src/tabs/presets/presets.js
@@ -664,9 +664,14 @@ presets.isPresetFitSearch = function(preset, searchParams) {
 };
 
 presets.adaptPhones = function() {
-    if (GUI.isCordova()) {
-        UI_PHONES.initToolbar();
-    }
+    const mediaQuery = window.matchMedia('(max-width: 576px)');
+    const handleMediaChange = function(e) {
+        if (e.matches) {
+            UI_PHONES.initToolbar();
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    handleMediaChange(mediaQuery);
 };
 
 presets.read = function(readInfo) {
diff --git a/src/tabs/presets/presets.less b/src/tabs/presets/presets.less
index 279e9c0d60..2e0ad6d3c8 100644
--- a/src/tabs/presets/presets.less
+++ b/src/tabs/presets/presets.less
@@ -7,7 +7,7 @@
 	}
 	p {
 		padding: 0;
-		border: 0 dotted var(--subtleAccent);
+		border: 0 dotted var(--surface-500);
 	}
 	.presets_warnings {
 		padding-left: 20px;
@@ -16,7 +16,7 @@
 	.top_panel_spacer {
 		width: 0px;
 		display: inline;
-		border: 1px var(--subtleAccent);
+		border: 1px var(--surface-500);
 		border-style: none none none solid;
 		height: 60%;
 		margin-right: 10px;
@@ -35,8 +35,8 @@
 		padding: 20px 20px 0px 20px;
 	}
 	.ms-choice {
-		background-color: var(--boxBackground) !important;
-		color: var(--defaultText) !important;
+		background-color: var(--surface-200) !important;
+		color: var(--text) !important;
 		>div.icon-close {
 			padding-top: 3px;
 			font-size: 16px;
@@ -77,7 +77,7 @@
 		padding-left: 8px;
 		padding-right: 8px;
 		color: white;
-		border: 1px solid var(--subtleAccent);
+		border: 1px solid var(--surface-500);
 		background-color: rgba(64, 64, 64, 1);
 		resize: none;
 	}
@@ -174,31 +174,31 @@
 }
 .presets_filter_select {
 	width: 100%;
-	background-color: var(--boxBackground);
-	color: var(--defaultText);
+	background-color: var(--surface-200);
+	color: var(--text);
 }
 .presets_filter_select_nonempty {
-	border-color: var(--accentBorder) !important;
+	border-color: var(--primary-500) !important;
 	border-width: 2px !important;
 }
 .presets_search_settings {
 	position: sticky;
 	top: 0px;
-	background-color: var(--boxBackground);
+	background-color: var(--surface-100);
 	z-index: 10;
 }
 .ms-drop {
-	background-color: var(--boxBackground) !important;
-	color: var(--defaultText) !important;
+	background-color: var(--surface-200) !important;
+	color: var(--text) !important;
 	input[type="checkbox"] {
 		margin-top: 0.1rem !important;
 	}
 }
 .presets_text_input {
-	border: 1px solid var(--subtleAccent);
+	border: 1px solid var(--surface-500);
 	border-radius: 3px;
-	background-color: var(--boxBackground);
-	color: var(--defaultText);
+	background-color: var(--surface-200);
+	color: var(--text);
 }
 #presets_filter_text {
 	height: 26px;
@@ -221,7 +221,7 @@
 	width: 100%;
 }
 #presets_cli_background {
-	border: 1px solid var(--subtleAccent);
+	border: 1px solid var(--surface-500);
 	background-color: rgba(64, 64, 64, 1);
 	margin-top: 0;
 	height: 300px;
@@ -229,15 +229,15 @@
 	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80);
 }
 .presets_fitler_table_header {
-	background: var(--quietHeader);
-	color: var(--quietText);
-	border-right: 1px solid var(--subtleAccent);
+	background: var(--surface-300);
+	color: var(--text);
+	border-right: 1px solid var(--surface-500);
 	font-weight: normal;
 	text-align: left;
 	padding: 4px 4px 4px 6px;
 }
 .presets_fitler_table_value {
-	background-color: var(--alternativeBackground);
+	background-color: var(--surface-300);
 	width: 100%;
 }
 #presets_cli_errors_dialog {
diff --git a/src/tabs/receiver.html b/src/tabs/receiver.html
index 0752105102..cd451c9538 100644
--- a/src/tabs/receiver.html
+++ b/src/tabs/receiver.html
@@ -1,4 +1,4 @@
-<div class="tab-receiver toolbar_fixed_bottom">
+<div class="tab-receiver">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabReceiver"></div>
         <div class="cf_doc_version_bt">
@@ -7,28 +7,21 @@
         <div class="note">
             <p i18n="receiverHelp"></p>
         </div>
-        <div class="grid-row">
-            <div class="grid-col col6 bars">
+        <div class="grid-row grid-box col5">
+            <div class="col-span-2">
                 <div class="gui_box grey tunings topspacer">
-                    <table class="pid_titlebar">
-                        <thead>
-                        <tr>
-                            <th i18n="receiverModelPreview"></th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td class="model_preview_cell">
-                                <div class="model_preview background_paper">
-                                    <canvas id="canvas"></canvas>
-                                </div>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="receiverModelPreview"></div>
+                    </div>
+                    <div class="model_preview_cell spacer_box">
+                        <div class="model_preview background_paper">
+                            <canvas id="canvas"></canvas>
+                        </div>
+                    </div>
                 </div>
+                <div class="bars"></div>
             </div>
-            <div class="grid-col col6">
+            <div class="col-span-3">
                 <!-- RECEIVER -->
                 <div class="receiver">
                     <div class="gui_box receiver grey">
@@ -70,9 +63,8 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="feature">
-                    <div class="gui_box grey">
+                <div class="grid-box col6">
+                    <div class="gui_box grey col-span-3">
                         <div class="gui_box_titlebar">
                             <div class="spacer_box_title" i18n="configurationTelemetry"></div>
                             <div class="helpicon cf_tip" i18n_title="configurationTelemetryHelp"></div>
@@ -85,7 +77,7 @@
                             </table>
                         </div>
                     </div>
-                    <div class="gui_box grey">
+                    <div class="gui_box grey col-span-3">
                         <div class="gui_box_titlebar">
                             <div class="spacer_box_title" i18n="configurationRSSI"></div>
                             <div class="helpicon cf_tip" i18n_title="configurationRSSIHelp"></div>
@@ -98,91 +90,89 @@
                             </table>
                         </div>
                     </div>
-                </div>
 
-                <div class="rssi_channel_wrapper grey">
-                    <div class="head" i18n="receiverRssiChannel"></div>
-                    <select name="rssi_channel">
-                        <!-- list generated here -->
-                    </select>
-                </div>
-                <div class="rcmap_wrapper grey">
-                    <div class="head">
-                        <span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span>
-                    </div>
-                    <div class="hybrid_element">
-                        <input type="text" name="rcmap" spellcheck="false" />
-                        <select class="hybrid_helper"
-                                name="rcmap_helper">
-                            <option i18n="receiverChannelDefaultOption" value="AETR1234"></option>
-                            <option value="AETR1234">FrSky / Futaba / Hitec (AETR1234)</option>
-                            <option value="TAER1234">Spektrum / Graupner / JR (TAER1234)</option>
+                    <div class="gui_box grey col-span-3">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverRssiChannel"></div>
+                        </div>
+                        <select name="rssi_channel">
+                            <!-- list generated here -->
                         </select>
                     </div>
-                </div>
-                <div class="gui_box tunings grey">
-                    <table class="sticks">
-                        <tr>
-                            <th i18n="receiverStickMin"></th>
-                            <th i18n="receiverStickCenter"></th>
-                            <th i18n="receiverStickMax"></th>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="stick_min" min="1000" max="1200"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"></div>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="stick_center" min="1401" max="1599"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"></div>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="stick_max" min="1800" max="2000"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"></div>
-                                </div>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
-                <div class="gui_box tunings grey">
-                    <table class="deadband">
-                        <tr>
-                            <th i18n="receiverDeadband"></th>
-                            <th i18n="receiverYawDeadband"></th>
-                            <th i18n="recevier3dDeadbandThrottle"></th>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="deadband" step="1" min="0" max="32"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"></div>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="yaw_deadband" step="1" min="0" max="100"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"></div>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="input-helpicon-flex">
-                                    <input type="number" name="3ddeadbandthrottle" step="1" min="0" max="100"/>
-                                    <div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"></div>
-                                </div>
-                            </td>
-                        </tr>
-                    </table>
+                    <div class="gui_box grey col-span-3">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverChannelMap"></div>
+                        </div>
+                        <div class="hybrid_element">
+                            <input type="text" name="rcmap" spellcheck="false" />
+                            <select class="hybrid_helper"
+                                    name="rcmap_helper">
+                                <option i18n="receiverChannelDefaultOption" value="AETR1234"></option>
+                                <option value="AETR1234">FrSky / Futaba / Hitec (AETR1234)</option>
+                                <option value="TAER1234">Spektrum / Graupner / JR (TAER1234)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 sticks">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverStickMin"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="stick_min" min="1000" max="1200"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"></div>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 sticks">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverStickCenter"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="stick_center" min="1401" max="1599"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"></div>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 sticks">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverStickMax"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="stick_max" min="1800" max="2000"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"></div>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 deadband">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverDeadband"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="deadband" min="18100" max="32"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"></div>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 deadband">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="receiverYawDeadband"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="yaw_deadband" min="0" max="100"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"></div>
+                        </div>
+                    </div>
+                    <div class="gui_box grey col-span-2 deadband">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title" i18n="recevier3dDeadbandThrottle"></div>
+                        </div>
+                        <div class="input-helpicon-flex">
+                            <input type="number" name="3ddeadbandthrottle" min="0" max="100"/>
+                            <div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"></div>
+                        </div>
+                    </div>
                 </div>
                 <div class="gui_box grey tunings topspacer rcSmoothing">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="receiverRcSmoothing"></div>
+                    </div>
                     <table class="rcSmoothing-table">
-                        <tr>
-                            <th colspan="3" i18n="receiverRcSmoothing"></th>
-                        </tr>
                         <tr class="rc-smoothing-type">
                             <td>
                                 <select name="rcSmoothing-select">
@@ -278,14 +268,14 @@
         <div class="gui_box grey">
             <div class="spacer">
                 <div class="wrapper graphAndLabel">
-                     <svg id="RX_plot">
+                    <svg id="RX_plot" class="col-span-5">
                         <g class="grid x" transform="translate(40, 180)"></g>
                         <g class="grid y" transform="translate(40, 10)"></g>
                         <g class="data" transform="translate(41, 1)"></g>
                         <g class="axis x" transform="translate(40, 180)"></g>
                         <g class="axis y" transform="translate(40, 10)"></g>
                     </svg>
-     
+
                     <div class="plot_control">
                         <div class="table">
                             <div class="sensor row">
@@ -355,21 +345,21 @@
         </div>
         <div class="clear-both"></div>
     </div>
-    <div class="content_toolbar">
-        <div class="btn sticks_btn">
-            <a class="sticks" href="#" i18n="receiverButtonSticks"></a>
-        </div>
-        <div class="btn bind_btn">
-            <a class="bind" href="#" i18n="receiverButtonBind"></a>
-        </div>
-        <div class="btn refresh_btn">
-            <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
-        </div>
-        <div class="btn update_btn">
-            <a class="update" href="#" i18n="receiverButtonSave"></a>
-        </div>
-        <div class="btn save_btn">
-            <a class="save" href="#" i18n="configurationButtonSave"></a>
-        </div>
+</div>
+<div class="content_toolbar toolbar_fixed_bottom">
+    <div class="btn sticks_btn">
+        <a class="sticks" href="#" i18n="receiverButtonSticks"></a>
+    </div>
+    <div class="btn bind_btn">
+        <a class="bind" href="#" i18n="receiverButtonBind"></a>
+    </div>
+    <div class="btn refresh_btn">
+        <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
+    </div>
+    <div class="btn update_btn">
+        <a class="update" href="#" i18n="receiverButtonSave"></a>
+    </div>
+    <div class="btn save_btn">
+        <a class="save" href="#" i18n="configurationButtonSave"></a>
     </div>
 </div>
diff --git a/src/tabs/setup.html b/src/tabs/setup.html
index 40641933b3..62bc898b30 100644
--- a/src/tabs/setup.html
+++ b/src/tabs/setup.html
@@ -68,8 +68,8 @@
             </div>
         </div>
         <div class="modelwrapper"></div>
-        <div class="grid-row">
-            <div class="grid-col col9 model-and-info">
+        <div class="grid-row grid-box col4">
+            <div class="col-span-3 model-and-info">
                 <div id="interactive_block">
                     <div id="canvas_wrapper" class="background_paper">
                         <canvas id="canvas"></canvas>
@@ -87,7 +87,7 @@
                     <a class="reset sm-min" href="#" i18n="initialSetupButtonResetZaxis"></a>
                 </div>
             </div>
-            <div class="grid-col col3">
+            <div class="col-span-1 grid-box col1">
                 <div class="gui_box grey instrumentsbox" align="center">
                     <div class="gui_box_titlebar" align="left">
                         <div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
diff --git a/src/tabs/vtx.html b/src/tabs/vtx.html
index 8e8a44da96..689faf8f6a 100644
--- a/src/tabs/vtx.html
+++ b/src/tabs/vtx.html
@@ -1,4 +1,4 @@
-<div class="tab-vtx toolbar_fixed_bottom">
+<div class="tab-vtx">
     <div class="content_wrapper">
         <!-- should be the first DIV on each tab -->
         <div class="cf_column">
@@ -25,258 +25,247 @@
         </div>
 
 
-        <div class="columnsWrapper">
-          <div class="gui_box grey select_mode vtx_supported leftColumn">
-
-              <div class="gui_box_titlebar">
-                  <div class="spacer_box_title" i18n="vtxSelectedMode"></div>
-              </div>
-
-              <div class="spacer_box">
-
-                  <div class="field checkbox vtx_frequency_channel">
-                      <span class="checkboxspacer">
-                          <input type="checkbox" id="vtx_frequency_channel" class="toggle" />
-                      </span>
-                      <label>
-                          <span class="freelabel" i18n="vtxFrequencyChannel"></span>
-                          <div class="helpicon cf_tip" i18n_title="vtxFrequencyChannelHelp"></div>
-                      </label>
-                  </div>
-
-                  <div class="field number vtx_band">
-                      <span class="numberspacer">
-                          <select id="vtx_band">
-                              <!-- Band options generated here from the js -->
-                          </select>
-                      </span>
-                      <label>
-                          <span i18n="vtxBand"></span>
-                          <div class="helpicon cf_tip" i18n_title="vtxBandHelp"></div>
-                      </label>
-                  </div>
-
-                  <div class="field number vtx_channel">
-                      <span class="numberspacer">
-                          <select id="vtx_channel">
-                              <!-- Channel options generated here from the js -->
-                          </select>
-                      </span>
-                      <label>
-                          <span i18n="vtxChannel"></span>
-                          <div class="helpicon cf_tip" i18n_title="vtxChannelHelp"></div>
-                      </label>
-                  </div>
-
-                  <div class="field number vtx_frequency">
-                      <span class="numberspacer">
-                          <input class="frequency_input" type="number" id="vtx_frequency" min="64" max="5999" />
-                      </span>
-                      <label>
-                          <span i18n="vtxFrequency"></span>
-                          <div class="helpicon cf_tip" i18n_title="vtxFrequencyHelp"></div>
-                      </label>
-                  </div>
-
-                  <div class="field number vtx_power">
-                      <span class="numberspacer">
-                          <select id="vtx_power">
-                              <!-- Power options generated here from the js -->
-                          </select>
-                      </span>
-                      <span i18n="vtxPower"></span>
-                      <div class="helpicon cf_tip" i18n_title="vtxPowerHelp"></div>
-                  </div>
-
-                  <div class="field checkbox vtx_pit_mode">
-                      <span class="checkboxspacer">
-                          <input type="checkbox" id="vtx_pit_mode" class="toggle" />
-                      </span>
-                      <span class="freelabel" i18n="vtxPitMode"></span>
-                      <div class="helpicon cf_tip" i18n_title="vtxPitModeHelp"></div>
-                  </div>
-
-                  <div class="field number vtx_pit_mode_frequency">
-                      <span class="numberspacer">
-                          <input class="frequency_input" type="number" id="vtx_pit_mode_frequency" min="0" max="5999">
-                      </span>
-                      <span i18n="vtxPitModeFrequency"></span>
-                      <div class="helpicon cf_tip" i18n_title="vtxPitModeFrequencyHelp"></div>
-                  </div>
-
-                  <div class="field select vtx_low_power_disarm">
-                      <span class="selectspacer">
-                          <select id="vtx_low_power_disarm">
-                              <option value="0" i18n="vtxLowPowerDisarmOption_0"></option>
-                              <option value="1" i18n="vtxLowPowerDisarmOption_1"></option>
-                              <option value="2" i18n="vtxLowPowerDisarmOption_2"></option>
-                          </select>
-                      </span>
-                      <span class="freelabel" i18n="vtxLowPowerDisarm"></span>
-                      <div class="helpicon cf_tip" i18n_title="vtxLowPowerDisarmHelp"></div>
-                  </div>
-              </div>
-
-          </div>
-
-          <div class="gui_box grey vtx_supported rightColumn">
-
-              <div class="gui_box_titlebar">
-                  <div class="spacer_box_title" i18n="vtxActualState"></div>
-              </div>
-
-              <div class="spacer_box VTX_info">
-                <table class="cf_table">
-                  <tbody>
-                    <tr>
-                        <td class="description_text" i18n="vtxDeviceReady"></td>
-                        <td><span class="colorToggle"></span></td>
-                    </tr>
-                    <tr class="description vtx_type">
-                        <td class="description_text" i18n="vtxType"></td>
-                        <td class="description_value" id="vtx_type_description"></td>
-                    </tr>
-                    <tr class="description vtx_band">
-                          <td class="description_text" i18n="vtxBand"></td>
-                          <td class="description_value" id="vtx_band_description"></td>
-                    </tr>
-                    <tr class="description vtx_channel">
-                          <td class="description_text" i18n="vtxChannel"></td>
-                          <td class="description_value" id="vtx_channel_description"></td>
-                    </tr>
-                    <tr class="description vtx_frequency">
-                          <td class="description_text" i18n="vtxFrequency"></td>
-                          <td class="description_value" id="vtx_frequency_description"></td>
-                    </tr>
-                    <tr class="description vtx_power">
-                          <td class="description_text" i18n="vtxPower"></td>
-                          <td class="description_value" id="vtx_power_description"></td>
-                    </tr>
-                    <tr class="description pit_mode">
-                          <td class="description_text" i18n="vtxPitMode"></td>
-                          <td class="description_value" id="vtx_pit_mode_description"></td>
-                    </tr>
-                    <tr class="description vtx_pit_mode">
-                          <td class="description_text" i18n="vtxPitModeFrequency"></td>
-                          <td class="description_value" id="vtx_pit_mode_frequency_description"></td>
-                    </tr>
-                    <tr class="description vtx_low_power_disarm">
-                          <td class="description_text" i18n="vtxLowPowerDisarm"></td>
-                          <td class="description_value" id="vtx_low_power_disarm_description"></td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-          </div>
-        </div>
+        <div class="grid-box col4">
+            <div class="gui_box grey select_mode vtx_supported col-span-3">
 
-                    <div class="leftWrapper">
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" i18n="vtxSelectedMode"></div>
+                </div>
 
-                        <div class="note vtx_table_save_pending">
-                            <div i18n="vtxMessageVerifyTable"></div>
-                        </div>
+                <div class="spacer_box">
 
-                        <div id="vtx_table" class="gui_box grey vtx_table_box vtx_table_available">
-
-                            <div class="gui_box_titlebar">
-                                <div class="spacer_box_title" i18n="vtxTable"></div>
-                            </div>
-
-                            <div class="spacer_box">
-
-                                <div class="field number vtx_table_bands_channels">
-                                    <span class="numberspacer">
-                                        <input class="one_digit_input" type="number" id="vtx_table_bands" min="0" max="8">
-                                    </span>
-                                    <label>
-                                        <span i18n="vtxTableBands"></span>
-                                    </label>
-                                    <span class="numberspacer">
-                                        <input class="one_digit_input" type="number" id="vtx_table_channels" min="0" max="8">
-                                    </span>
-                                    <label>
-                                        <span i18n="vtxTableChannels"></span>
-                                    </label>
-                                    <div class="helpicon cf_tip" i18n_title="vtxTableBandsChannelsHelp"></div>
-                                </div>
-
-                                <div class="field number table vtx_table_bands_table">
-                                    <span>
-	                                    <table class="table_vtx_bands">
-	                                        <tbody>
-	                                            <!--  Bands generated here from the templates at the bottom -->
-	                                        </tbody>
-	                                    </table>
-                                    </span>
-                                    <span>
-                                        <div class="helpicon cf_tip" i18n_title="vtxTableBandsChannelsTableHelp"></div>
-                                    </span>
-                                </div>
-
-                                <div class="field number vtx_table_powerlevels">
-                                    <span class="numberspacer">
-                                        <input class="one_digit_input" type="number" id="vtx_table_powerlevels" min="0" max="8">
-                                    </span>
-                                    <label>
-                                        <span i18n="vtxTablePowerLevels"></span>
-                                        <div class="helpicon cf_tip" i18n_title="vtxTablePowerLevelsHelp"></div>
-                                    </label>
-                                </div>
-
-                                <div class="field number table vtx_table_powerlevels_table">
-                                    <span>
-                                        <table class="table_vtx_powerlevels">
-                                            <tbody>
-                                                <tr class="vtx_table_powerlevels_title">
-                                                    <!--  Title values generated here dinamically -->
-                                                </tr>
-                                                <tr class="vtx_table_powerlevels_values">
-                                                    <!--  Powerlevels values generated here from the templates at the bottom -->
-                                                </tr>
-                                                <tr class="vtx_table_powerlevels_labels">
-                                                    <!--  Powerlevels labels generated here from the templates at the bottom -->
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </span>
-                                    <span>
-                                        <div class="helpicon cf_tip" i18n_title="vtxTablePowerLevelsTableHelp"></div>
-                                    </span>
-                                </div>
-
-                            </div>
-                        </div>
+                    <div class="field checkbox vtx_frequency_channel">
+                        <span class="checkboxspacer">
+                            <input type="checkbox" id="vtx_frequency_channel" class="toggle" />
+                        </span>
+                        <label>
+                            <span class="freelabel" i18n="vtxFrequencyChannel"></span>
+                            <div class="helpicon cf_tip" i18n_title="vtxFrequencyChannelHelp"></div>
+                        </label>
+                    </div>
 
+                    <div class="field number vtx_band">
+                        <span class="numberspacer">
+                            <select id="vtx_band">
+                                <!-- Band options generated here from the js -->
+                            </select>
+                        </span>
+                        <label>
+                            <span i18n="vtxBand"></span>
+                            <div class="helpicon cf_tip" i18n_title="vtxBandHelp"></div>
+                        </label>
                     </div>
 
+                    <div class="field number vtx_channel">
+                        <span class="numberspacer">
+                            <select id="vtx_channel">
+                                <!-- Channel options generated here from the js -->
+                            </select>
+                        </span>
+                        <label>
+                            <span i18n="vtxChannel"></span>
+                            <div class="helpicon cf_tip" i18n_title="vtxChannelHelp"></div>
+                        </label>
+                    </div>
 
-    </div>
+                    <div class="field number vtx_frequency">
+                        <span class="numberspacer">
+                            <input class="frequency_input" type="number" id="vtx_frequency" min="64" max="5999" />
+                        </span>
+                        <label>
+                            <span i18n="vtxFrequency"></span>
+                            <div class="helpicon cf_tip" i18n_title="vtxFrequencyHelp"></div>
+                        </label>
+                    </div>
 
-    <div class="content_toolbar xs-compressed">
+                    <div class="field number vtx_power">
+                        <span class="numberspacer">
+                            <select id="vtx_power">
+                                <!-- Power options generated here from the js -->
+                            </select>
+                        </span>
+                        <span i18n="vtxPower"></span>
+                        <div class="helpicon cf_tip" i18n_title="vtxPowerHelp"></div>
+                    </div>
 
-        <div class="btn save_btn">
-            <a class="save" id="save_button" href="#" i18n="vtxButtonSave"></a>
-        </div>
-        <div class="btn load_cliboard_btn clipboard_available">
-            <a class="load_clipboard" id="load_clipboard_button" href="#" i18n="vtxButtonLoadClipboard"></a>
-        </div>
-        <div class="btn load_file_btn">
-            <a class="load_file" id="load_file_button" href="#" i18n="vtxButtonLoadFile"></a>
-        </div>
-        <div class="btn save_file_btn">
-            <a class="save_file" id="save_file_button" href="#" i18n="vtxButtonSaveFile"></a>
+                    <div class="field checkbox vtx_pit_mode">
+                        <span class="checkboxspacer">
+                            <input type="checkbox" id="vtx_pit_mode" class="toggle" />
+                        </span>
+                        <span class="freelabel" i18n="vtxPitMode"></span>
+                        <div class="helpicon cf_tip" i18n_title="vtxPitModeHelp"></div>
+                    </div>
+
+                    <div class="field number vtx_pit_mode_frequency">
+                        <span class="numberspacer">
+                            <input class="frequency_input" type="number" id="vtx_pit_mode_frequency" min="0" max="5999">
+                        </span>
+                        <span i18n="vtxPitModeFrequency"></span>
+                        <div class="helpicon cf_tip" i18n_title="vtxPitModeFrequencyHelp"></div>
+                    </div>
+
+                    <div class="field select vtx_low_power_disarm">
+                        <span class="selectspacer">
+                            <select id="vtx_low_power_disarm">
+                                <option value="0" i18n="vtxLowPowerDisarmOption_0"></option>
+                                <option value="1" i18n="vtxLowPowerDisarmOption_1"></option>
+                                <option value="2" i18n="vtxLowPowerDisarmOption_2"></option>
+                            </select>
+                        </span>
+                        <span class="freelabel" i18n="vtxLowPowerDisarm"></span>
+                        <div class="helpicon cf_tip" i18n_title="vtxLowPowerDisarmHelp"></div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="gui_box grey vtx_supported col-span-1">
+
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" i18n="vtxActualState"></div>
+                </div>
+
+                <div class="spacer_box VTX_info">
+                    <table class="cf_table">
+                    <tbody>
+                        <tr>
+                            <td class="description_text" i18n="vtxDeviceReady"></td>
+                            <td><span class="colorToggle"></span></td>
+                        </tr>
+                        <tr class="description vtx_type">
+                            <td class="description_text" i18n="vtxType"></td>
+                            <td class="description_value" id="vtx_type_description"></td>
+                        </tr>
+                        <tr class="description vtx_band">
+                            <td class="description_text" i18n="vtxBand"></td>
+                            <td class="description_value" id="vtx_band_description"></td>
+                        </tr>
+                        <tr class="description vtx_channel">
+                            <td class="description_text" i18n="vtxChannel"></td>
+                            <td class="description_value" id="vtx_channel_description"></td>
+                        </tr>
+                        <tr class="description vtx_frequency">
+                            <td class="description_text" i18n="vtxFrequency"></td>
+                            <td class="description_value" id="vtx_frequency_description"></td>
+                        </tr>
+                        <tr class="description vtx_power">
+                            <td class="description_text" i18n="vtxPower"></td>
+                            <td class="description_value" id="vtx_power_description"></td>
+                        </tr>
+                        <tr class="description pit_mode">
+                            <td class="description_text" i18n="vtxPitMode"></td>
+                            <td class="description_value" id="vtx_pit_mode_description"></td>
+                        </tr>
+                        <tr class="description vtx_pit_mode">
+                            <td class="description_text" i18n="vtxPitModeFrequency"></td>
+                            <td class="description_value" id="vtx_pit_mode_frequency_description"></td>
+                        </tr>
+                        <tr class="description vtx_low_power_disarm">
+                            <td class="description_text" i18n="vtxLowPowerDisarm"></td>
+                            <td class="description_value" id="vtx_low_power_disarm_description"></td>
+                        </tr>
+                    </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="x-scroll-wrapper col-span-4">
+                <div id="vtx_table" class="gui_box grey vtx_table_box">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="vtxTable"></div>
+                    </div>
+                    <div class="spacer_box">
+                        <div class="field number vtx_table_bands_channels">
+                            <span class="numberspacer">
+                                <input class="one_digit_input" type="number" id="vtx_table_bands" min="0" max="8">
+                            </span>
+                            <label>
+                                <span i18n="vtxTableBands"></span>
+                            </label>
+                            <span class="numberspacer">
+                                <input class="one_digit_input" type="number" id="vtx_table_channels" min="0" max="8">
+                            </span>
+                            <label>
+                                <span i18n="vtxTableChannels"></span>
+                            </label>
+                            <div class="helpicon cf_tip" i18n_title="vtxTableBandsChannelsHelp"></div>
+                        </div>
+                        <div class="field number table vtx_table_bands_table">
+                            <span>
+                                <table class="table_vtx_bands">
+                                    <tbody>
+                                        <!--  Bands generated here from the templates at the bottom -->
+                                    </tbody>
+                                </table>
+                            </span>
+                            <span>
+                                <div class="helpicon cf_tip" i18n_title="vtxTableBandsChannelsTableHelp"></div>
+                            </span>
+                        </div>
+                        <div class="field number vtx_table_powerlevels">
+                            <span class="numberspacer">
+                                <input class="one_digit_input" type="number" id="vtx_table_powerlevels" min="0" max="8">
+                            </span>
+                            <label>
+                                <span i18n="vtxTablePowerLevels"></span>
+                                <div class="helpicon cf_tip" i18n_title="vtxTablePowerLevelsHelp"></div>
+                            </label>
+                        </div>
+                        <div class="field number table vtx_table_powerlevels_table">
+                            <span>
+                                <table class="table_vtx_powerlevels">
+                                    <tbody>
+                                        <tr class="vtx_table_powerlevels_title">
+                                            <!--  Title values generated here dinamically -->
+                                        </tr>
+                                        <tr class="vtx_table_powerlevels_values">
+                                            <!--  Powerlevels values generated here from the templates at the bottom -->
+                                        </tr>
+                                        <tr class="vtx_table_powerlevels_labels">
+                                            <!--  Powerlevels labels generated here from the templates at the bottom -->
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </span>
+                            <span>
+                                <div class="helpicon cf_tip" i18n_title="vtxTablePowerLevelsTableHelp"></div>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="btn save_lua_btn">
-            <a class="save_lua" id="save_lua_button" href="#" i18n="vtxButtonSaveLua"></a>
-            <div id="vtxLuaFileTooltip" class="helpicon cf_tip" i18n_title="vtxLuaFileHelp"></div>
+        <div class="note vtx_table_save_pending">
+            <div i18n="vtxMessageVerifyTable"></div>
         </div>
-
     </div>
 
+
+</div>
+
+<div class="content_toolbar xs-compressed toolbar_fixed_bottom">
+
     <div class="toolbar_expand_btn" nbrow="2">
         <em class="fas fa-ellipsis-h"></em>
     </div>
 
+    <div class="btn save_btn">
+        <a class="save" id="save_button" href="#" i18n="vtxButtonSave"></a>
+    </div>
+    <div class="btn load_cliboard_btn clipboard_available">
+        <a class="load_clipboard" id="load_clipboard_button" href="#" i18n="vtxButtonLoadClipboard"></a>
+    </div>
+    <div class="btn load_file_btn">
+        <a class="load_file" id="load_file_button" href="#" i18n="vtxButtonLoadFile"></a>
+    </div>
+    <div class="btn save_file_btn">
+        <a class="save_file" id="save_file_button" href="#" i18n="vtxButtonSaveFile"></a>
+    </div>
+    <div class="btn save_lua_btn">
+        <a class="save_lua" id="save_lua_button" href="#" i18n="vtxButtonSaveLua"></a>
+        <div id="vtxLuaFileTooltip" class="helpicon cf_tip" i18n_title="vtxLuaFileHelp"></div>
+    </div>
+
 </div>
 
 <div id="tab-vtx-templates">