diff --git a/core/frontend/public/assets/vehicles/models/boat/UNDEFINED.glb b/core/frontend/public/assets/vehicles/models/rover/BOAT.glb
similarity index 100%
rename from core/frontend/public/assets/vehicles/models/boat/UNDEFINED.glb
rename to core/frontend/public/assets/vehicles/models/rover/BOAT.glb
diff --git a/core/frontend/public/assets/vehicles/models/boat/UNDEFINED.json b/core/frontend/public/assets/vehicles/models/rover/BOAT.json
similarity index 100%
rename from core/frontend/public/assets/vehicles/models/boat/UNDEFINED.json
rename to core/frontend/public/assets/vehicles/models/rover/BOAT.json
diff --git a/core/frontend/public/assets/vehicles/models/rover/unknown.glb b/core/frontend/public/assets/vehicles/models/rover/unknown.glb
index d2638af107..4aa4296f05 100644
Binary files a/core/frontend/public/assets/vehicles/models/rover/unknown.glb and b/core/frontend/public/assets/vehicles/models/rover/unknown.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/BLUEROV1.glb b/core/frontend/public/assets/vehicles/models/sub/BLUEROV1.glb
index 18da3d348c..084c25791c 100644
Binary files a/core/frontend/public/assets/vehicles/models/sub/BLUEROV1.glb and b/core/frontend/public/assets/vehicles/models/sub/BLUEROV1.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_3.glb b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_3.glb
index b17866ac2b..db74d3a171 100755
Binary files a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_3.glb and b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_3.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_4.glb b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_4.glb
index 95cc65eeff..bc2da19054 100755
Binary files a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_4.glb and b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_4.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_5.glb b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_5.glb
index c6827475b9..e023f953cb 100755
Binary files a/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_5.glb and b/core/frontend/public/assets/vehicles/models/sub/SIMPLEROV_5.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/VECTORED.glb b/core/frontend/public/assets/vehicles/models/sub/VECTORED.glb
index 05f86a6378..e2c0bc1d75 100644
Binary files a/core/frontend/public/assets/vehicles/models/sub/VECTORED.glb and b/core/frontend/public/assets/vehicles/models/sub/VECTORED.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/VECTORED_6DOF.glb b/core/frontend/public/assets/vehicles/models/sub/VECTORED_6DOF.glb
index 30d51cb6cc..1491ceef61 100644
Binary files a/core/frontend/public/assets/vehicles/models/sub/VECTORED_6DOF.glb and b/core/frontend/public/assets/vehicles/models/sub/VECTORED_6DOF.glb differ
diff --git a/core/frontend/public/assets/vehicles/models/sub/bluerov.glb b/core/frontend/public/assets/vehicles/models/sub/bluerov.glb
index d64a154c8c..79fb8aa08c 100755
Binary files a/core/frontend/public/assets/vehicles/models/sub/bluerov.glb and b/core/frontend/public/assets/vehicles/models/sub/bluerov.glb differ
diff --git a/core/frontend/src/assets/3d/generic_sensor.glb b/core/frontend/src/assets/3d/generic_sensor.glb
new file mode 100644
index 0000000000..9f5432b8a5
Binary files /dev/null and b/core/frontend/src/assets/3d/generic_sensor.glb differ
diff --git a/core/frontend/src/assets/3d/navigator.glb b/core/frontend/src/assets/3d/navigator.glb
new file mode 100644
index 0000000000..83eb0a0cb1
Binary files /dev/null and b/core/frontend/src/assets/3d/navigator.glb differ
diff --git a/core/frontend/src/components/app/SettingsMenu.vue b/core/frontend/src/components/app/SettingsMenu.vue
index e9a96414e4..2322a4a212 100644
--- a/core/frontend/src/components/app/SettingsMenu.vue
+++ b/core/frontend/src/components/app/SettingsMenu.vue
@@ -43,7 +43,7 @@
             <v-btn
               v-tooltip="'Restores BlueOS services to default configurations'"
               class="ma-2"
-              @click="reset_settings"
+              @click="confirm_reset_settings"
             >
               <v-icon left>
                 mdi-cog-refresh
@@ -135,6 +135,12 @@
         </v-card>
       </v-card>
     </v-dialog>
+    <WarningDialog
+      v-model="show_reset_warning"
+      :message="resetWarningMessage"
+      confirm-label="Yes, reset settings"
+      @confirm="onConfirmResetSettings"
+    />
     <v-dialog
       width="380"
       :value="show_reset_dialog"
@@ -153,6 +159,7 @@
 import Vue from 'vue'
 
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
+import WarningDialog from '@/components/common/WarningDialog.vue'
 import filebrowser from '@/libs/filebrowser'
 import Notifier from '@/libs/notifier'
 import bag from '@/store/bag'
@@ -168,6 +175,7 @@ export default Vue.extend({
   name: 'SettingsMenu',
   components: {
     SpinningLogo,
+    WarningDialog,
   },
   data() {
     return {
@@ -177,6 +185,7 @@ export default Vue.extend({
       mavlink_log_folder_size: null as null | string,
       show_dialog: false,
       show_reset_dialog: false,
+      show_reset_warning: false,
       operation_in_progress: false,
       operation_description: '',
       operation_error: undefined as undefined | string,
@@ -186,6 +195,12 @@ export default Vue.extend({
     has_operation_error(): boolean {
       return this.operation_error !== undefined
     },
+    resetWarningMessage(): string {
+      return (
+        'Resetting will restore BlueOS services to their default configurations.\n'
+        + 'This action cannot be undone. Proceed?'
+      )
+    },
   },
   async mounted() {
     await this.get_log_folder_size()
@@ -243,6 +258,13 @@ export default Vue.extend({
         })
       this.operation_in_progress = false
     },
+    confirm_reset_settings(): void {
+      this.show_reset_warning = true
+    },
+    onConfirmResetSettings(): void {
+      this.show_reset_warning = false
+      this.reset_settings()
+    },
     async reset_settings(): Promise<void> {
       this.prepare_operation('Resetting settings...')
 
diff --git a/core/frontend/src/components/common/WarningDialog.vue b/core/frontend/src/components/common/WarningDialog.vue
new file mode 100644
index 0000000000..6f35412a78
--- /dev/null
+++ b/core/frontend/src/components/common/WarningDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <v-dialog
+    :value="value"
+    :width="width"
+    :persistent="persistent"
+    @input="emitInput"
+    @click:outside="handleOutsideClick"
+    @keydown.esc="handleEsc"
+  >
+    <v-sheet
+      color="warning"
+      outlined
+    >
+      <v-card variant="outlined">
+        <v-card-title class="align-center">
+          <span class="warning-title">
+            <span
+              class="warning-emoji"
+              aria-label="warning"
+              role="img"
+            >⚠️</span>
+            {{ title }}
+          </span>
+        </v-card-title>
+        <v-card-text :class="['warning-text', textClass]">
+          {{ message }}
+        </v-card-text>
+        <v-card-actions>
+          <v-btn :color="cancelColor" @click="close">
+            {{ cancelLabel }}
+          </v-btn>
+          <v-spacer />
+          <v-btn :color="confirmColor" @click="confirmAndMaybeClose">
+            {{ confirmLabel }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  name: 'WarningDialog',
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: 'WARNING',
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    confirmLabel: {
+      type: String,
+      required: true,
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Cancel',
+    },
+    confirmColor: {
+      type: String as PropType<string>,
+      default: 'warning',
+    },
+    cancelColor: {
+      type: String as PropType<string>,
+      default: 'primary',
+    },
+    width: {
+      type: [String, Number] as PropType<string | number>,
+      default: 'fit-content',
+    },
+    persistent: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnOutside: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnConfirm: {
+      type: Boolean,
+      default: true,
+    },
+    textClass: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    emitInput(state: boolean) {
+      this.$emit('input', state)
+    },
+    close() {
+      this.emitInput(false)
+    },
+    handleOutsideClick() {
+      if (this.closeOnOutside && !this.persistent) {
+        this.close()
+      }
+    },
+    handleEsc() {
+      if (this.closeOnEsc && !this.persistent) {
+        this.close()
+      }
+    },
+    confirmAndMaybeClose() {
+      this.$emit('confirm')
+      if (this.closeOnConfirm) {
+        this.close()
+      }
+    },
+  },
+})
+</script>
+
+<style scoped>
+.warning-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.warning-emoji {
+  font-size: 1.2rem;
+}
+
+.warning-text {
+  max-width: 30rem;
+}
+</style>
diff --git a/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue b/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
index 55dee7a808..8d59190f6c 100644
--- a/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
+++ b/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
@@ -198,10 +198,16 @@ export default Vue.extend({
     },
     param_value() {
       this.updateSelectedFlags()
-      if (this.last_sent_value === undefined) {
-        this.internal_new_value = this.param_value
-        this.internal_new_value_as_string = String(this.internal_new_value)
+      if (
+        this.last_sent_value !== undefined
+         && this.internal_new_value !== this.last_sent_value
+         && this.param_value === this.last_sent_value
+         && this.param_value === this.last_sent_value
+      ) {
+        return
       }
+      this.internal_new_value = this.param_value
+      this.internal_new_value_as_string = String(this.internal_new_value)
     },
   },
   mounted() {
@@ -307,7 +313,7 @@ export default Vue.extend({
           .map((value) => parseFloat(value))
           .includes(this.internal_new_value)
       }
-      if (this.param?.value) {
+      if (this.param != null) {
         this.internal_new_value_as_string = this.internal_new_value.toString()
       }
 
diff --git a/core/frontend/src/components/parameter-editor/LeakSetup.vue b/core/frontend/src/components/parameter-editor/LeakSetup.vue
new file mode 100644
index 0000000000..d940d6812b
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/LeakSetup.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="12">
+          <span class="text-h6">Leak {{ leak_number }}</span>
+        </v-col>
+      </v-row>
+
+      <v-row align="center">
+        <v-col v-if="type_parameter" cols="4">
+          <inline-parameter-editor
+            :param="type_parameter"
+            label="Sensor type"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="logic_parameter" cols="4">
+          <inline-parameter-editor
+            :param="logic_parameter"
+            label="Logic when dry"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="failsafe_parameter" cols="4">
+          <inline-parameter-editor
+            :param="failsafe_parameter"
+            label="Failsafe action"
+            auto-set
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+
+export default Vue.extend({
+  name: 'LeakSetup',
+  components: {
+    InlineParameterEditor,
+  },
+  props: {
+    leakParameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    leak_number(): number {
+      return parseInt(this.leakParameter.name.match(/LEAK(\d+)_TYPE/)?.[1] ?? '0', 10)
+    },
+    type_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_TYPE`)
+    },
+    logic_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_LOGIC`)
+    },
+    failsafe_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('FS_LEAK_ENABLE')
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/RelaySetup.vue b/core/frontend/src/components/parameter-editor/RelaySetup.vue
new file mode 100644
index 0000000000..d2aed447f0
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/RelaySetup.vue
@@ -0,0 +1,90 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="default_parameter"
+            :parameter="default_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Startup State"
+          />
+          <parameter-switch
+            v-if="inverted_parameter"
+            :parameter="inverted_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Invert Output"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-row>
+            <v-btn
+              v-tooltip="'Turn relay on'"
+              class="ma-4"
+              @click="setRelay(1)"
+            >
+              <v-icon small left>
+                mdi-power
+              </v-icon>
+              Relay On
+            </v-btn>
+          </v-row>
+          <v-row>
+            <v-btn
+              v-tooltip="'Turn relay off'"
+              class="ma-4"
+              @click="setRelay(0)"
+            >
+              <v-icon small left>
+                mdi-power-off
+              </v-icon>
+              Relay Off
+            </v-btn>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import { MavCmd } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+export default Vue.extend({
+  name: 'RelaySetup',
+  props: {
+    relayParameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    relay_number(): number {
+      return parseInt(this.relayParameter.name.match(/RELAY(\d+)_FUNCTION/)?.[1] ?? '0', 10)
+    },
+    inverted_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`RELAY${this.relay_number}_INVERTED`)
+    },
+    default_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`RELAY${this.relay_number}_DEFAULT`)
+    },
+  },
+  methods: {
+    setRelay(setting: number): void {
+      // MAV_CMD_DO_SET_RELAY: param1 = relay instance (0-indexed), param2 = setting (0=off, 1=on, 2=toggle)
+      mavlink2rest.sendCommandLong(
+        MavCmd.MAV_CMD_DO_SET_RELAY,
+        this.relay_number - 1, // Convert to 0-indexed relay instance
+        setting,
+      )
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionActuatorEditor.vue b/core/frontend/src/components/parameter-editor/ServoFunctionActuatorEditor.vue
new file mode 100644
index 0000000000..447f75e109
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionActuatorEditor.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="d-flex align-center">
+    <v-row>
+      <v-col cols="6">
+        <span class="text-h6">Increment</span>
+      </v-col>
+      <v-col cols="6">
+        <inline-parameter-editor
+          :label="actuator_inc_param?.name"
+          :param="actuator_inc_param"
+        />
+      </v-col>
+      <v-row>
+        <v-col cols="12">
+          <v-alert
+            v-if="!has_joystick_function_configured"
+            type="warning"
+          >
+            <span>Joystick functions not configured for this actuator.<br />
+              Please configure a joystick button for this actuator using your GCS of choice.</span>
+          </v-alert>
+        </v-col>
+      </v-row>
+      <servo-function-range-editor
+        :param="param"
+      />
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+import ServoFunctionRangeEditor from './ServoFunctionRangeEditor.vue'
+
+export default Vue.extend({
+  name: 'ServoFunctionActuatorEditor',
+  components: {
+    InlineParameterEditor,
+    ServoFunctionRangeEditor,
+  },
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    actuator_number(): number | undefined {
+      const option_name = this.param.options?.[this.param.value] as string
+      const actuator_number = option_name?.match(/\d+/)?.[0]
+      if (!actuator_number) return undefined
+      return parseInt(actuator_number, 10)
+    },
+    actuator_inc_param(): Parameter | undefined {
+      return autopilot.parameter(`ACTUATOR${this.actuator_number}_INC`)
+    },
+    btn_params(): Parameter[] {
+      // returns all JS button parameters
+      return autopilot.parameterRegex('BTN(\\d+)_(S?)FUNCTION') as Parameter[]
+    },
+    options(): Record<string, string> {
+      return this.btn_params[0]?.options as Record<string, string>
+    },
+    this_actuator_functions(): number[] {
+      // returns the joystick button functions for the current actuator
+      if (!this.actuator_number || !this.options) {
+        return []
+      }
+      return Object.entries(this.options)
+        .filter(([_, value]) => value.startsWith(`actuator_${this.actuator_number}_`))
+        .map(([key]) => parseInt(key, 10))
+    },
+    has_joystick_function_configured(): boolean {
+      return this.btn_params.some((param) => this.this_actuator_functions.includes(param.value as number))
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionEditorDialog.vue b/core/frontend/src/components/parameter-editor/ServoFunctionEditorDialog.vue
index 0d45c98da7..7fc5b7b44a 100644
--- a/core/frontend/src/components/parameter-editor/ServoFunctionEditorDialog.vue
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionEditorDialog.vue
@@ -23,110 +23,11 @@
           :param="param"
         />
 
-        <v-card class="mt-4 mb-4">
-          <v-card-text>
-            <div class="d-flex align-center mb-4">
-              <span class="text-h6">Servo Range Configuration</span>
-              <v-tooltip bottom>
-                <template #activator="{ on, attrs }">
-                  <v-icon
-                    class="ml-2"
-                    small
-                    v-bind="attrs"
-                    v-on="on"
-                  >
-                    mdi-information
-                  </v-icon>
-                </template>
-                <span>Adjust the minimum, trim, and maximum PWM values for this servo</span>
-              </v-tooltip>
-            </div>
-            <div
-              ref="sliderContainer"
-              class="servo-slider"
-              @mousedown="onSliderMouseDown"
-              @mousemove="onSliderMouseMove"
-              @mouseup="onSliderMouseUp"
-              @mouseleave="onSliderMouseUp"
-              @touchstart="onTouchStart"
-              @touchmove="onTouchMove"
-              @touchend="onTouchEnd"
-              @touchcancel="onTouchEnd"
-            >
-              <div class="slider-track" />
-              <div
-                class="slider-fill"
-                :style="{ left: `${minPercent}%`, width: `${maxPercent - minPercent}%` }"
-              />
-              <div
-                v-for="(thumbType, index) in ['min', 'trim', 'max']"
-                :key="thumbType"
-                class="slider-thumb"
-                :class="{ active: activeThumb === index }"
-                :style="{ left: `${getThumbPosition(index)}%` }"
-                @mousedown.stop="startDragging(index)"
-              >
-                <div class="thumb-label">
-                  {{ thumbType }}: {{ getThumbValue(index) }}
-                </div>
-              </div>
-            </div>
-          </v-card-text>
-        </v-card>
-
-        <v-row>
-          <v-col
-            cols="12"
-            sm="4"
-          >
-            <v-card
-              outlined
-              class="parameter-card"
-            >
-              <v-card-text class="py-2">
-                <inline-parameter-editor
-                  :auto-set="true"
-                  :label="min_param?.name"
-                  :param="min_param"
-                />
-              </v-card-text>
-            </v-card>
-          </v-col>
-          <v-col
-            cols="12"
-            sm="4"
-          >
-            <v-card
-              outlined
-              class="parameter-card"
-            >
-              <v-card-text class="py-2">
-                <inline-parameter-editor
-                  :auto-set="true"
-                  :label="trim_param?.name"
-                  :param="trim_param"
-                />
-              </v-card-text>
-            </v-card>
-          </v-col>
-          <v-col
-            cols="12"
-            sm="4"
-          >
-            <v-card
-              outlined
-              class="parameter-card"
-            >
-              <v-card-text class="py-2">
-                <inline-parameter-editor
-                  :auto-set="true"
-                  :label="max_param?.name"
-                  :param="max_param"
-                />
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
+        <component
+          :is="function_type"
+          v-if="function_type"
+          :param="param"
+        />
       </v-card-text>
 
       <v-card-actions>
@@ -143,30 +44,26 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { VueConstructor } from 'vue'
 
-import mavlink2rest from '@/libs/MAVLink2Rest'
-import autopilot from '@/store/autopilot'
 import Parameter from '@/types/autopilot/parameter'
 
 import InlineParameterEditor from './InlineParameterEditor.vue'
-
-type ParamType = 'min' | 'trim' | 'max'
-type ParamValueKey = 'minValue' | 'trimValue' | 'maxValue'
-
-type ValueMap = Record<ParamType, ParamValueKey>
-type ParamMap = Record<ParamType, string>
-
-const MIN_PWM = 800
-const MAX_PWM = 2200
-const DEFAULT_MIN = 1000
-const DEFAULT_TRIM = 1500
-const DEFAULT_MAX = 2000
+import ServoFunctionActuatorEditor from './ServoFunctionActuatorEditor.vue'
+import ServoFunctionGpioEditor from './ServoFunctionGpioEditor.vue'
+import ServoFunctionLightsEditor from './ServoFunctionLightsEditor.vue'
+import ServoFunctionMotorEditor from './ServoFunctionMotorEditor.vue'
+import ServoFunctionRangeEditor from './ServoFunctionRangeEditor.vue'
 
 export default Vue.extend({
   name: 'ServoFunctionEditorDialog',
   components: {
     InlineParameterEditor,
+    ServoFunctionRangeEditor,
+    ServoFunctionMotorEditor,
+    ServoFunctionGpioEditor,
+    ServoFunctionActuatorEditor,
+    ServoFunctionLightsEditor,
   },
   model: {
     prop: 'value',
@@ -182,317 +79,26 @@ export default Vue.extend({
       required: true,
     },
   },
-  data() {
-    return {
-      paramValues: {},
-      minValue: DEFAULT_MIN,
-      trimValue: DEFAULT_TRIM,
-      maxValue: DEFAULT_MAX,
-      activeThumb: -1,
-      isDragging: false,
-    }
-  },
   computed: {
-    trim_param(): Parameter | undefined {
-      return this.getParamByType('_TRIM')
-    },
-    max_param(): Parameter | undefined {
-      return this.getParamByType('_MAX')
-    },
-    min_param(): Parameter | undefined {
-      return this.getParamByType('_MIN')
-    },
-    minPercent(): number {
-      return this.calculatePercentage(this.minValue)
-    },
-    trimPercent(): number {
-      return this.calculatePercentage(this.trimValue)
-    },
-    maxPercent(): number {
-      return this.calculatePercentage(this.maxValue)
-    },
-  },
-  watch: {
-    param: {
-      handler(newParam: Parameter) {
-        if (!newParam?.name) return
-        this.$set(this.paramValues, newParam.name, newParam.value)
-        this.initializeSliderValues()
-      },
-      immediate: true,
-    },
-    'min_param.value': function onMinParamChange(newValue: number) {
-      this.updateParamValue('min', newValue)
-    },
-    'trim_param.value': function onTrimParamChange(newValue: number) {
-      this.updateParamValue('trim', newValue)
-    },
-    'max_param.value': function onMaxParamChange(newValue: number) {
-      this.updateParamValue('max', newValue)
-    },
-  },
-  methods: {
-    getParamByType(type: string): Parameter | undefined {
-      if (!this.param?.name) return undefined
-      const name = this.param.name.replace('_FUNCTION', type)
-      return autopilot.parameter(name)
-    },
-    calculatePercentage(value: number): number {
-      return (value - MIN_PWM) / (MAX_PWM - MIN_PWM) * 100
-    },
-    updateParamValue(type: ParamType, newValue: number): void {
-      const valueMap: ValueMap = {
-        min: 'minValue',
-        trim: 'trimValue',
-        max: 'maxValue',
+    function_type(): VueConstructor<Vue> | undefined {
+      const name = this.param.options?.[this.param.value]
+      if (name?.toLowerCase().includes('motor')) {
+        return ServoFunctionMotorEditor
       }
-      const paramMap: ParamMap = {
-        min: 'min_param',
-        trim: 'trim_param',
-        max: 'max_param',
+      if (name?.toLowerCase().includes('gpio')) {
+        return ServoFunctionGpioEditor
       }
-
-      const valueKey = valueMap[type]
-      const paramKey = paramMap[type]
-      const param = this[paramKey] as Parameter | undefined
-
-      if (newValue !== this[valueKey]) {
-        this[valueKey] = Number(newValue)
-        if (param) {
-          param.value = this[valueKey]
-        }
+      if (name?.toLowerCase().includes('actuator')) {
+        return ServoFunctionActuatorEditor
       }
-    },
-    initializeSliderValues(): void {
-      if (this.min_param && this.trim_param && this.max_param) {
-        this.minValue = Number(this.min_param.value)
-        this.trimValue = Number(this.trim_param.value)
-        this.maxValue = Number(this.max_param.value)
+      if (name?.toLowerCase().includes('lights')) {
+        return ServoFunctionLightsEditor
       }
-    },
-    getThumbPosition(index: number): number {
-      const positions = [this.minPercent, this.trimPercent, this.maxPercent]
-      return positions[index] ?? 0
-    },
-    getThumbValue(index: number): number {
-      const values = [this.minValue, this.trimValue, this.maxValue]
-      return values[index] ?? 0
-    },
-    startDragging(index: number): void {
-      this.activeThumb = index
-      this.isDragging = true
-    },
-    onSliderMouseDown(event: MouseEvent): void {
-      const container = this.$refs.sliderContainer as HTMLElement
-      if (!container) return
-
-      const { value } = this.calculateValueFromEvent(event, container)
-      const closestThumb = this.findClosestThumb(value)
-
-      this.startDragging(closestThumb)
-      this.updateThumbValue(event)
-    },
-    calculateValueFromEvent(event: MouseEvent | Touch, container: HTMLElement): { value: number } {
-      const rect = container.getBoundingClientRect()
-      const position = (event.clientX - rect.left) / rect.width
-      return { value: Math.round(MIN_PWM + position * (MAX_PWM - MIN_PWM)) }
-    },
-    findClosestThumb(value: number): number {
-      const distances = [
-        Math.abs(value - this.minValue),
-        Math.abs(value - this.trimValue),
-        Math.abs(value - this.maxValue),
-      ]
-      return distances.indexOf(Math.min(...distances))
-    },
-    onSliderMouseMove(event: MouseEvent): void {
-      if (this.isDragging) {
-        this.updateThumbValue(event)
+      if (name?.toLowerCase().includes('disabled')) {
+        return undefined
       }
-    },
-    onSliderMouseUp(): void {
-      if (!this.isDragging) return
-
-      const paramMap = {
-        0: this.min_param,
-        1: this.trim_param,
-        2: this.max_param,
-      }
-      const valueMap = {
-        0: this.minValue,
-        1: this.trimValue,
-        2: this.maxValue,
-      }
-
-      const param = paramMap[this.activeThumb as keyof typeof paramMap]
-      const value = valueMap[this.activeThumb as keyof typeof valueMap]
-
-      if (param) {
-        mavlink2rest.setParam(
-          param.name,
-          value,
-          autopilot.system_id,
-          param.paramType.type,
-        )
-        param.value = value
-      }
-
-      this.isDragging = false
-      this.activeThumb = -1
-    },
-    updateThumbValue(event: MouseEvent | Touch): void {
-      if (!this.isDragging) return
-
-      const container = this.$refs.sliderContainer as HTMLElement
-      if (!container) return
-
-      const { value } = this.calculateValueFromEvent(event, container)
-      this.updateValueBasedOnThumb(value)
-    },
-    updateValueBasedOnThumb(value: number): void {
-      const constraints = {
-        0: { min: MIN_PWM, max: this.trimValue - 1 },
-        1: { min: this.minValue + 1, max: this.maxValue - 1 },
-        2: { min: this.trimValue + 1, max: MAX_PWM },
-      }
-
-      const updateFunctions = {
-        0: this.updateMin,
-        1: this.updateTrim,
-        2: this.updateMax,
-      }
-
-      const constraint = constraints[this.activeThumb as keyof typeof constraints]
-      const updateFunction = updateFunctions[this.activeThumb as keyof typeof updateFunctions]
-
-      if (constraint && updateFunction) {
-        const constrainedValue = Math.min(Math.max(constraint.min, value), constraint.max)
-        updateFunction(constrainedValue.toString())
-      }
-    },
-    updateMin(value: string): void {
-      this.updateParamWithConstraints(value, this.min_param, MIN_PWM, this.trimValue - 1, 'minValue')
-    },
-    updateTrim(value: string): void {
-      this.updateParamWithConstraints(value, this.trim_param, this.minValue + 1, this.maxValue - 1, 'trimValue')
-    },
-    updateMax(value: string): void {
-      this.updateParamWithConstraints(value, this.max_param, this.trimValue + 1, MAX_PWM, 'maxValue')
-    },
-    updateParamWithConstraints(
-      value: string,
-      param: Parameter | undefined,
-      min: number,
-      max: number,
-      property: 'minValue' | 'trimValue' | 'maxValue',
-    ): void {
-      const numValue = Number(value)
-      if (param && !Number.isNaN(numValue)) {
-        this[property] = Math.min(Math.max(min, numValue), max)
-        if (param.value !== this[property]) {
-          param.value = this[property]
-        }
-      }
-    },
-    onTouchStart(event: TouchEvent): void {
-      event.preventDefault()
-      const touch = event.touches[0]
-      this.onSliderMouseDown({
-        clientX: touch.clientX,
-        clientY: touch.clientY,
-      } as MouseEvent)
-    },
-    onTouchMove(event: TouchEvent): void {
-      event.preventDefault()
-      const touch = event.touches[0]
-      this.onSliderMouseMove({
-        clientX: touch.clientX,
-        clientY: touch.clientY,
-      } as MouseEvent)
-    },
-    onTouchEnd(): void {
-      this.onSliderMouseUp()
+      return ServoFunctionRangeEditor
     },
   },
 })
 </script>
-
-<style scoped>
-.parameter-card {
-  margin-bottom: 12px;
-  padding: 10px;
-  transition: box-shadow 0.2s;
-}
-
-.parameter-card:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-}
-
-.servo-slider {
-  position: relative;
-  height: 80px;
-  cursor: pointer;
-  padding: 0 10px;
-  margin: 20px 0;
-}
-
-.slider-track {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-  height: 4px;
-  background-color: rgba(128, 128, 128, 0.2);
-  border-radius: 2px;
-}
-
-.slider-fill {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 4px;
-  background-color: var(--v-primary-base);
-  border-radius: 2px;
-  opacity: 0.8;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
-  background-color: var(--v-primary-base);
-  border: 2px solid white;
-  border-radius: 50%;
-  cursor: grab;
-  transition: all 0.2s ease;
-  z-index: 1;
-}
-
-.slider-thumb:hover {
-  transform: translate(-50%, -50%) scale(1.1);
-  box-shadow: 0 0 0 8px rgba(var(--v-primary-base), 0.1);
-}
-
-.slider-thumb.active {
-  transform: translate(-50%, -50%) scale(1.2);
-  cursor: grabbing;
-  box-shadow: 0 0 0 12px rgba(var(--v-primary-base), 0.15);
-}
-
-.thumb-label {
-  position: absolute;
-  top: -25px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: var(--v-primary-base);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  user-select: none;
-  text-align: center;
-}
-</style>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue b/core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue
new file mode 100644
index 0000000000..4515974f6f
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="align-center">
+    <p>
+      Some flight controller servo channels are capable of digital (GPIO) functionalities.
+      Available options include relays, leak detection (input-capable pins only),
+      and other functions not yet supported by this UI.
+    </p>
+    <p>
+      This servo's GPIO (<strong>{{ this_servo_gpio }}</strong>) is currently in use by
+      <strong>{{ function_type_using_this_gpio?.name ?? 'nothing' }}</strong>.
+    </p>
+    <v-row align="end">
+      <v-col cols="6">
+        <span style="font-size: 1.0rem;">GPIO Function:</span>
+      </v-col>
+      <v-col cols="6">
+        <v-select
+          v-model="selected_function_type"
+          :items="options"
+          item-text="text"
+          item-value="value"
+          return-object
+          hide-details
+          @change="onChange"
+        />
+      </v-col>
+    </v-row>
+    <relay-setup
+      v-if="function_type_using_this_gpio?.name?.includes('RELAY')"
+      :relay-parameter="function_type_using_this_gpio"
+    />
+    <leak-setup
+      v-if="function_type_using_this_gpio?.name?.includes('LEAK')"
+      :leak-parameter="function_type_using_this_gpio"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import autopilot from '@/store/autopilot_manager'
+import Parameter from '@/types/autopilot/parameter'
+import { servoNumberToGpio } from '@/utils/servoGpio'
+
+import LeakSetup from './LeakSetup.vue'
+import RelaySetup from './RelaySetup.vue'
+
+export default Vue.extend({
+  name: 'ServoFunctionGpioEditor',
+  components: {
+    LeakSetup,
+    RelaySetup,
+  },
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selected_function_type: undefined as {text: string, value: Parameter, disabled?: boolean} | undefined,
+    }
+  },
+  computed: {
+    pin_parameters(): Parameter[] {
+      return autopilot_data.parameterRegex('^.*_PIN$') as Parameter[]
+    },
+    servo_number(): number | undefined {
+      const option_name = this.param.name.match(/SERVO(\d+)_FUNCTION/)?.[1]
+      return option_name ? parseInt(option_name, 10) : undefined
+    },
+    board_name(): string | undefined {
+      return autopilot.current_board?.name
+    },
+    this_servo_gpio(): number | undefined {
+      if (!this.servo_number) return undefined
+      return servoNumberToGpio(this.servo_number, this.board_name)
+    },
+    function_pin_parameter_using_this_gpio(): Parameter | undefined {
+      return this.pin_parameters.find((param) => param.value === this.this_servo_gpio)
+    },
+    function_type_using_this_gpio(): Parameter | undefined {
+      const param_name = this.function_pin_parameter_using_this_gpio?.name.split('_')[0]
+      let new_param_name: string | undefined
+      if (param_name?.includes('RELAY')) {
+        new_param_name = `${param_name}_FUNCTION`
+      }
+      if (param_name?.includes('LEAK')) {
+        new_param_name = `${param_name}_TYPE`
+      }
+      return new_param_name
+        ? autopilot_data.parameter(new_param_name as string)
+        : this.function_pin_parameter_using_this_gpio
+    },
+    relay_parameters(): Parameter[] {
+      return autopilot_data.parameterRegex('^RELAY(\\d+)_FUNCTION$') as Parameter[]
+    },
+    leak_parameters(): Parameter[] {
+      return autopilot_data.parameterRegex('^LEAK(\\d+)_TYPE$') as Parameter[]
+    },
+    options(): {text: string, value: Parameter, disabled?: boolean}[] {
+      const supportedOptions: {text: string, value: Parameter, disabled?: boolean}[] = [
+        ...this.relay_parameters,
+        ...this.leak_parameters,
+      ].map((param) => ({
+        text: param.name.split('_')[0].toLowerCase().toTitle(),
+        value: param,
+      }))
+      // If the current GPIO is used by an unsupported parameter, add it to the options
+      const pinParam = this.function_pin_parameter_using_this_gpio
+      if (pinParam && !this.isSupportedParam(pinParam)) {
+        supportedOptions.unshift({
+          text: `${pinParam.name} (not supported)`,
+          value: pinParam,
+          disabled: true,
+        })
+      }
+      return supportedOptions
+    },
+  },
+  watch: {
+    function_type_using_this_gpio: {
+      handler(new_value: Parameter | undefined) {
+        if (!new_value) {
+          this.selected_function_type = undefined
+          return
+        }
+        const isSupported = this.isSupportedParam(new_value)
+        this.selected_function_type = {
+          text: isSupported
+            ? new_value.name.split('_')[0].toLowerCase().toTitle()
+            : `${new_value.name} (not supported)`,
+          value: new_value,
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    isSupportedParam(param: Parameter): boolean {
+      return param.name.includes('RELAY') || param.name.includes('LEAK')
+    },
+    onChange(value: {text: string, value: Parameter}) {
+      const is_relay = value.value.name.includes('RELAY')
+      const is_leak = value.value.name.includes('LEAK')
+      if (!this.this_servo_gpio) {
+        console.warn('No GPIO found for servo', this.servo_number)
+        return
+      }
+      if (!is_relay && !is_leak) {
+        // Unsupported parameter type, don't handle
+        return
+      }
+      // Capture previous owner before making any changes (computed updates after setParam)
+      const previousPinParam = this.function_pin_parameter_using_this_gpio
+      if (is_relay) {
+        const paramName = value.value.name
+        const paramType = value.value.paramType.type
+        mavlink2rest.setParam(paramName, 1 /* Relay */, autopilot_data.system_id, paramType)
+        const pin_param_name = paramName.replace('FUNCTION', 'PIN')
+        const gpio = this.this_servo_gpio
+        mavlink2rest.setParam(pin_param_name, gpio, autopilot_data.system_id, 'MAV_PARAM_TYPE_INT8')
+        if (previousPinParam && previousPinParam.name !== pin_param_name) {
+          mavlink2rest.setParam(previousPinParam.name, -1, autopilot_data.system_id, 'MAV_PARAM_TYPE_INT8')
+        }
+      }
+      if (is_leak) {
+        const paramName = value.value.name
+        const paramType = value.value.paramType.type
+        mavlink2rest.setParam(paramName, 1 /* Digital */, autopilot_data.system_id, paramType)
+        const pin_param_name = paramName.replace('TYPE', 'PIN')
+        const gpio = this.this_servo_gpio
+        mavlink2rest.setParam(pin_param_name, gpio, autopilot_data.system_id, 'MAV_PARAM_TYPE_INT8')
+        if (previousPinParam && previousPinParam.name !== pin_param_name) {
+          mavlink2rest.setParam(previousPinParam.name, -1, autopilot_data.system_id, 'MAV_PARAM_TYPE_INT8')
+        }
+      }
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionLightsEditor.vue b/core/frontend/src/components/parameter-editor/ServoFunctionLightsEditor.vue
new file mode 100644
index 0000000000..a0a992ecb0
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionLightsEditor.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="d-flex align-center">
+    <v-row>
+      <v-col cols="6">
+        <span class="text-h6">Joystick Steps</span>
+      </v-col>
+      <v-col cols="6">
+        <inline-parameter-editor
+          :label="steps_param?.name"
+          :param="steps_param"
+        />
+      </v-col>
+      <servo-function-range-editor
+        :param="param"
+      />
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+import ServoFunctionRangeEditor from './ServoFunctionRangeEditor.vue'
+
+export default Vue.extend({
+  name: 'ServoFunctionLightsEditor',
+  components: {
+    InlineParameterEditor,
+    ServoFunctionRangeEditor,
+  },
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    steps_param(): Parameter | undefined {
+      return autopilot.parameter('JS_LIGHTS_STEPS')
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue b/core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
new file mode 100644
index 0000000000..f13b73d495
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <v-row class="mb-4">
+      <v-col cols="6">
+        <span class="text-h6">PWM Type</span>
+      </v-col>
+      <v-col cols="6">
+        <inline-parameter-editor
+          :auto-set="true"
+          :label="mot_pwm_type_param?.name"
+          :param="mot_pwm_type_param"
+        />
+      </v-col>
+    </v-row>
+    <v-row class="mb-4">
+      <v-col cols="6">
+        <span class="text-h6">Reverse Direction</span>
+      </v-col>
+      <v-col cols="6">
+        <inline-parameter-editor
+          :auto-set="true"
+          :label="reverse_direction_param?.name"
+          :param="reverse_direction_param"
+        />
+      </v-col>
+    </v-row>
+
+    <servo-function-range-editor
+      v-if="mot_pwm_type_is_supported"
+      :param="param"
+      :min-param="min_param"
+      :trim-param="trim_param"
+      :max-param="max_param"
+      :title="shared_min_max_param ? 'Shared Motor Configuration' : 'Motor Configuration'"
+      :tooltip="tooltip"
+    />
+    <v-alert
+      v-else
+      type="warning"
+      class="mb-4"
+    >
+      PWM type is not supported by BlueOS.
+    </v-alert>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+import ServoFunctionRangeEditor from './ServoFunctionRangeEditor.vue'
+
+enum PwmTypes {
+  Normal = 0,
+  OneShot = 1,
+  OneShot125 = 2,
+  Brushed = 3,
+  DShot150 = 4,
+  DShot300 = 5,
+  DShot600 = 6,
+  DShot1200 = 7,
+  PWMRange = 8,
+  PWMAngle = 9,
+}
+
+export default Vue.extend({
+  name: 'ServoFunctionMotorEditor',
+  components: {
+    InlineParameterEditor,
+    ServoFunctionRangeEditor,
+  },
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    tooltip(): string {
+      return this.shared_min_max_param
+        ? 'Adjust the minimum, and maximum PWM values for all motors'
+        : 'Adjust the minimum, trim, and maximum PWM values for this motor'
+    },
+    motor_number(): number | undefined {
+      const function_name = this.param.options?.[this.param.value] as string
+      const motor_number = function_name.match(/\d+/)?.[0]
+      if (!motor_number) return undefined
+      return parseInt(motor_number, 10)
+    },
+    shared_min_max_param(): boolean {
+      return this.mot_pwm_type === PwmTypes.Normal
+    },
+    trim_param(): Parameter | undefined {
+      if (this.mot_pwm_type === PwmTypes.PWMAngle) {
+        return autopilot.parameter(`SERVO${this.motor_number}_TRIM`)
+      }
+      return undefined
+    },
+    max_param(): Parameter | undefined {
+      if (this.mot_pwm_type === PwmTypes.PWMAngle) {
+        return this.getParamByType('_MAX')
+      }
+      return autopilot.parameter('MOT_PWM_MAX')
+    },
+    min_param(): Parameter | undefined {
+      if (this.mot_pwm_type === PwmTypes.PWMAngle) {
+        return this.getParamByType('_MIN')
+      }
+      return autopilot.parameter('MOT_PWM_MIN')
+    },
+    mot_pwm_type_param(): Parameter | undefined {
+      return autopilot.parameter('MOT_PWM_TYPE')
+    },
+    mot_pwm_type(): PwmTypes {
+      const value = this.mot_pwm_type_param?.value as unknown as PwmTypes
+      return value ?? PwmTypes.Normal
+    },
+    mot_pwm_type_is_supported(): boolean {
+      return this.mot_pwm_type === PwmTypes.Normal || this.mot_pwm_type === PwmTypes.PWMAngle
+    },
+    reverse_direction_param(): Parameter | undefined {
+      if (this.mot_pwm_type === PwmTypes.PWMAngle) {
+        return this.getParamByType('_REVERSED')
+      }
+      if (this.mot_pwm_type === PwmTypes.Normal) {
+        return autopilot.parameter(`MOT_${this.motor_number}_DIRECTION`)
+      }
+      return undefined
+    },
+  },
+  methods: {
+    getParamByType(type: string): Parameter | undefined {
+      if (!this.param?.name) return undefined
+      const name = this.param.name.replace('_FUNCTION', type)
+      return autopilot.parameter(name)
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/components/parameter-editor/ServoFunctionRangeEditor.vue b/core/frontend/src/components/parameter-editor/ServoFunctionRangeEditor.vue
new file mode 100644
index 0000000000..8776bdb564
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionRangeEditor.vue
@@ -0,0 +1,509 @@
+<template>
+  <div>
+    <v-card class="mt-4 mb-4">
+      <v-card-text>
+        <div class="d-flex align-center mb-4">
+          <span class="text-h6">{{ title }}</span>
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-icon
+                class="ml-2"
+                small
+                v-bind="attrs"
+                v-on="on"
+              >
+                mdi-information
+              </v-icon>
+            </template>
+            <span>{{ tooltip }}</span>
+          </v-tooltip>
+        </div>
+        <div
+          ref="sliderContainer"
+          class="servo-slider"
+          @mousedown="onSliderMouseDown"
+          @mousemove="onSliderMouseMove"
+          @mouseup="onSliderMouseUp"
+          @mouseleave="onSliderMouseUp"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          @touchcancel="onTouchEnd"
+        >
+          <div class="slider-track" />
+          <div
+            class="slider-fill"
+            :style="{ left: `${minPercent}%`, width: `${maxPercent - minPercent}%` }"
+          />
+          <div
+            v-for="(thumbType, index) in ['min', 'trim', 'max']"
+            v-show="thumbType !== 'trim' || trimParam"
+            :key="thumbType"
+            class="slider-thumb"
+            :class="{ active: activeThumb === index }"
+            :style="{ left: `${getThumbPosition(index)}%` }"
+            @mousedown.stop="startDragging(index)"
+          >
+            <div class="thumb-label">
+              {{ thumbType }}: {{ getThumbValue(index) }}
+            </div>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+
+    <v-row>
+      <v-col
+        cols="12"
+        sm="4"
+      >
+        <v-card
+          outlined
+          class="parameter-card"
+        >
+          <v-card-text class="py-2">
+            <inline-parameter-editor
+              :auto-set="true"
+              :label="resolvedMinParam?.name"
+              :param="resolvedMinParam"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="4"
+      >
+        <v-card
+          outlined
+          class="parameter-card"
+          :disabled="!trimParam"
+          :class="{ 'disabled-card': !trimParam }"
+        >
+          <v-card-text class="py-2">
+            <inline-parameter-editor
+              :auto-set="true"
+              :label="resolvedTrimParam?.name ?? 'Trim'"
+              :param="resolvedTrimParam"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="4"
+      >
+        <v-card
+          outlined
+          class="parameter-card"
+        >
+          <v-card-text class="py-2">
+            <inline-parameter-editor
+              :auto-set="true"
+              :label="resolvedMaxParam?.name"
+              :param="resolvedMaxParam"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+
+type ParamType = 'min' | 'trim' | 'max'
+type ParamValueKey = 'minValue' | 'trimValue' | 'maxValue'
+
+type ValueMap = Record<ParamType, ParamValueKey>
+type ParamMap = Record<ParamType, string>
+
+const MIN_PWM = 800
+const MAX_PWM = 2200
+const DEFAULT_MIN = 1000
+const DEFAULT_TRIM = 1500
+const DEFAULT_MAX = 2000
+
+export default Vue.extend({
+  name: 'ServoFunctionRangeEditor',
+  components: {
+    InlineParameterEditor,
+  },
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+    minParam: {
+      type: Object as () => Parameter | undefined,
+      default: undefined,
+    },
+    trimParam: {
+      type: Object as () => Parameter | undefined,
+      default: undefined,
+    },
+    maxParam: {
+      type: Object as () => Parameter | undefined,
+      default: undefined,
+    },
+    title: {
+      type: String,
+      default: 'Servo Range Configuration',
+    },
+    tooltip: {
+      type: String,
+      default: 'Adjust the minimum, trim, and maximum PWM values for this servo',
+    },
+  },
+  data() {
+    return {
+      minValue: DEFAULT_MIN,
+      trimValue: DEFAULT_TRIM,
+      maxValue: DEFAULT_MAX,
+      activeThumb: -1,
+      isDragging: false,
+    }
+  },
+  computed: {
+    resolvedTrimParam(): Parameter | undefined {
+      return this.trimParam ?? this.getParamByType('_TRIM')
+    },
+    resolvedMaxParam(): Parameter | undefined {
+      return this.maxParam ?? this.getParamByType('_MAX')
+    },
+    resolvedMinParam(): Parameter | undefined {
+      return this.minParam ?? this.getParamByType('_MIN')
+    },
+    minPercent(): number {
+      return this.calculatePercentage(this.minValue)
+    },
+    trimPercent(): number {
+      return this.calculatePercentage(this.trimValue)
+    },
+    maxPercent(): number {
+      return this.calculatePercentage(this.maxValue)
+    },
+  },
+  watch: {
+    param: {
+      handler(newParam: Parameter) {
+        if (!newParam?.name) return
+        this.initializeSliderValues()
+      },
+      immediate: true,
+    },
+    minParam: {
+      handler() {
+        this.initializeSliderValues()
+      },
+    },
+    trimParam: {
+      handler() {
+        this.initializeSliderValues()
+      },
+    },
+    maxParam: {
+      handler() {
+        this.initializeSliderValues()
+      },
+    },
+    'resolvedMinParam.value': function onMinParamChange(newValue: number) {
+      this.updateParamValue('min', newValue)
+    },
+    'resolvedTrimParam.value': function onTrimParamChange(newValue: number) {
+      this.updateParamValue('trim', newValue)
+    },
+    'resolvedMaxParam.value': function onMaxParamChange(newValue: number) {
+      this.updateParamValue('max', newValue)
+    },
+  },
+  methods: {
+    getParamByType(type: string): Parameter | undefined {
+      if (!this.param?.name) return undefined
+      const name = this.param.name.replace('_FUNCTION', type)
+      return autopilot.parameter(name)
+    },
+    calculatePercentage(value: number): number {
+      return (value - MIN_PWM) / (MAX_PWM - MIN_PWM) * 100
+    },
+    updateParamValue(type: ParamType, newValue: number): void {
+      const valueMap: ValueMap = {
+        min: 'minValue',
+        trim: 'trimValue',
+        max: 'maxValue',
+      }
+      const paramMap: ParamMap = {
+        min: 'resolvedMinParam',
+        trim: 'resolvedTrimParam',
+        max: 'resolvedMaxParam',
+      }
+
+      const valueKey = valueMap[type]
+      const paramKey = paramMap[type]
+      const param = this[paramKey] as Parameter | undefined
+
+      if (newValue !== this[valueKey]) {
+        this[valueKey] = Number(newValue)
+        if (param) {
+          param.value = this[valueKey]
+        }
+      }
+    },
+    initializeSliderValues(): void {
+      if (this.resolvedMinParam) {
+        this.minValue = Number(this.resolvedMinParam.value)
+      }
+      if (this.resolvedTrimParam) {
+        this.trimValue = Number(this.resolvedTrimParam.value)
+      }
+      if (this.resolvedMaxParam) {
+        this.maxValue = Number(this.resolvedMaxParam.value)
+      }
+    },
+    getThumbPosition(index: number): number {
+      const positions = [this.minPercent, this.trimPercent, this.maxPercent]
+      return positions[index] ?? 0
+    },
+    getThumbValue(index: number): number {
+      const values = [this.minValue, this.trimValue, this.maxValue]
+      return values[index] ?? 0
+    },
+    startDragging(index: number): void {
+      this.activeThumb = index
+      this.isDragging = true
+    },
+    onSliderMouseDown(event: MouseEvent): void {
+      const container = this.$refs.sliderContainer as HTMLElement
+      if (!container) return
+
+      const { value } = this.calculateValueFromEvent(event, container)
+      const closestThumb = this.findClosestThumb(value)
+
+      this.startDragging(closestThumb)
+      this.updateThumbValue(event)
+    },
+    calculateValueFromEvent(event: MouseEvent | Touch, container: HTMLElement): { value: number } {
+      const rect = container.getBoundingClientRect()
+      const position = (event.clientX - rect.left) / rect.width
+      return { value: Math.round(MIN_PWM + position * (MAX_PWM - MIN_PWM)) }
+    },
+    findClosestThumb(value: number): number {
+      const distances = [
+        Math.abs(value - this.minValue),
+        this.resolvedTrimParam ? Math.abs(value - this.trimValue) : Infinity,
+        Math.abs(value - this.maxValue),
+      ]
+      return distances.indexOf(Math.min(...distances))
+    },
+    onSliderMouseMove(event: MouseEvent): void {
+      if (this.isDragging) {
+        this.updateThumbValue(event)
+      }
+    },
+    onSliderMouseUp(): void {
+      if (!this.isDragging) return
+
+      const paramMap = {
+        0: this.resolvedMinParam,
+        1: this.resolvedTrimParam,
+        2: this.resolvedMaxParam,
+      }
+      const valueMap = {
+        0: this.minValue,
+        1: this.trimValue,
+        2: this.maxValue,
+      }
+
+      const param = paramMap[this.activeThumb as keyof typeof paramMap]
+      const value = valueMap[this.activeThumb as keyof typeof valueMap]
+
+      if (param) {
+        mavlink2rest.setParam(
+          param.name,
+          value,
+          autopilot.system_id,
+          param.paramType.type,
+        )
+        param.value = value
+      }
+
+      this.isDragging = false
+      this.activeThumb = -1
+    },
+    updateThumbValue(event: MouseEvent | Touch): void {
+      if (!this.isDragging) return
+
+      const container = this.$refs.sliderContainer as HTMLElement
+      if (!container) return
+
+      const { value } = this.calculateValueFromEvent(event, container)
+      this.updateValueBasedOnThumb(value)
+    },
+    updateValueBasedOnThumb(value: number): void {
+      const hasTrim = !!this.resolvedTrimParam
+      const constraints = {
+        0: { min: MIN_PWM, max: hasTrim ? this.trimValue - 1 : this.maxValue - 1 },
+        1: { min: this.minValue + 1, max: this.maxValue - 1 },
+        2: { min: hasTrim ? this.trimValue + 1 : this.minValue + 1, max: MAX_PWM },
+      }
+
+      const updateFunctions = {
+        0: this.updateMin,
+        1: this.updateTrim,
+        2: this.updateMax,
+      }
+
+      const constraint = constraints[this.activeThumb as keyof typeof constraints]
+      const updateFunction = updateFunctions[this.activeThumb as keyof typeof updateFunctions]
+
+      if (constraint && updateFunction) {
+        const constrainedValue = Math.min(Math.max(constraint.min, value), constraint.max)
+        updateFunction(constrainedValue.toString())
+      }
+    },
+    updateMin(value: string): void {
+      const maxConstraint = this.resolvedTrimParam ? this.trimValue - 1 : this.maxValue - 1
+      this.updateParamWithConstraints(value, this.resolvedMinParam, MIN_PWM, maxConstraint, 'minValue')
+    },
+    updateTrim(value: string): void {
+      this.updateParamWithConstraints(
+        value,
+        this.resolvedTrimParam,
+        this.minValue + 1,
+        this.maxValue - 1,
+        'trimValue',
+      )
+    },
+    updateMax(value: string): void {
+      const minConstraint = this.resolvedTrimParam ? this.trimValue + 1 : this.minValue + 1
+      this.updateParamWithConstraints(value, this.resolvedMaxParam, minConstraint, MAX_PWM, 'maxValue')
+    },
+    updateParamWithConstraints(
+      value: string,
+      param: Parameter | undefined,
+      min: number,
+      max: number,
+      property: 'minValue' | 'trimValue' | 'maxValue',
+    ): void {
+      const numValue = Number(value)
+      if (param && !Number.isNaN(numValue)) {
+        this[property] = Math.min(Math.max(min, numValue), max)
+        if (param.value !== this[property]) {
+          param.value = this[property]
+        }
+      }
+    },
+    onTouchStart(event: TouchEvent): void {
+      event.preventDefault()
+      const touch = event.touches[0]
+      this.onSliderMouseDown({
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      } as MouseEvent)
+    },
+    onTouchMove(event: TouchEvent): void {
+      event.preventDefault()
+      const touch = event.touches[0]
+      this.onSliderMouseMove({
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      } as MouseEvent)
+    },
+    onTouchEnd(): void {
+      this.onSliderMouseUp()
+    },
+  },
+})
+</script>
+
+<style scoped>
+.parameter-card {
+  margin-bottom: 12px;
+  padding: 10px;
+  transition: box-shadow 0.2s;
+}
+
+.parameter-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.parameter-card.disabled-card {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.servo-slider {
+  position: relative;
+  height: 80px;
+  cursor: pointer;
+  padding: 0 10px;
+  margin: 20px 0;
+}
+
+.slider-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  height: 4px;
+  background-color: rgba(128, 128, 128, 0.2);
+  border-radius: 2px;
+}
+
+.slider-fill {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  background-color: var(--v-primary-base);
+  border-radius: 2px;
+  opacity: 0.8;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  background-color: var(--v-primary-base);
+  border: 2px solid white;
+  border-radius: 50%;
+  cursor: grab;
+  transition: all 0.2s ease;
+  z-index: 1;
+}
+
+.slider-thumb:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 0 0 8px rgba(var(--v-primary-base), 0.1);
+}
+
+.slider-thumb.active {
+  transform: translate(-50%, -50%) scale(1.2);
+  cursor: grabbing;
+  box-shadow: 0 0 0 12px rgba(var(--v-primary-base), 0.15);
+}
+
+.thumb-label {
+  position: absolute;
+  top: -25px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--v-primary-base);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  user-select: none;
+  text-align: center;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/Configure.vue b/core/frontend/src/components/vehiclesetup/Configure.vue
index 771de1007c..c75b76f982 100644
--- a/core/frontend/src/components/vehiclesetup/Configure.vue
+++ b/core/frontend/src/components/vehiclesetup/Configure.vue
@@ -41,10 +41,12 @@ import autopilot from '@/store/autopilot_manager'
 
 import SpinningLogo from '../common/SpinningLogo.vue'
 import ArdupilotAccelerometerSetup from './configuration/accelerometer/ArdupilotAccelerometerSetup.vue'
+import ArdupilotVehicleBodySetup from './configuration/ArdupilotVehicleBodySetup.vue'
 import Camera from './configuration/camera.vue'
 import ArdupilotMavlinkCompassSetup from './configuration/compass/ArdupilotMavlinkCompassSetup.vue'
-import FailsafesConfigration from './configuration/failsafes/Failsafes.vue'
+import FailsafesConfiguration from './configuration/failsafes/Failsafes.vue'
 import LightsConfigration from './configuration/lights.vue'
+import PowerConfiguration from './configuration/power/PowerConfiguration.vue'
 import BaroCalib from './overview/BaroCalib.vue'
 import GripperInfo from './overview/gripper.vue'
 import GyroCalib from './overview/GyroCalib.vue'
@@ -71,12 +73,13 @@ export default Vue.extend({
     LeakInfo,
     ParamSets,
     LightsConfigration,
+    PowerConfiguration,
     ArdupilotMavlinkCompassSetup,
     ArdupilotAccelerometerSetup,
     SpinningLogo,
     GyroCalib,
     BaroCalib,
-    FailsafesConfigration,
+    FailsafesConfiguration,
     Camera,
     NotSafeOverlay,
   },
@@ -84,6 +87,7 @@ export default Vue.extend({
     return {
       pages: [
         { title: 'Parameters', value: 'parameters', component: ParamSets },
+        { title: 'Vehicle Body', value: 'vehiclebody', component: ArdupilotVehicleBodySetup },
         { title: 'Gyroscope', value: 'gyroscope', component: GyroCalib },
         { title: 'Accelerometer', value: 'accelerometer', component: ArdupilotAccelerometerSetup },
         { title: 'Compass', value: 'compass', component: ArdupilotMavlinkCompassSetup },
@@ -94,7 +98,8 @@ export default Vue.extend({
           component: LightsConfigration,
           filter: () => autopilot.vehicle_type === 'Submarine',
         },
-        { title: 'Failsafes', value: 'failsafes', component: FailsafesConfigration },
+        { title: 'Failsafes', value: 'failsafes', component: FailsafesConfiguration },
+        { title: 'Power', value: 'power', component: PowerConfiguration },
         { title: 'Camera Gimbal', value: 'camera', component: Camera },
       ] as Item[],
     }
@@ -112,6 +117,6 @@ export default Vue.extend({
 
 <style scoped>
 .main-container {
-  background-color: #135DA3AA !important;
+  background-color: var(--v-mariner_blue-base) !important;
 }
 </style>
diff --git a/core/frontend/src/components/vehiclesetup/OrientationPicker.vue b/core/frontend/src/components/vehiclesetup/OrientationPicker.vue
new file mode 100644
index 0000000000..73724226be
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/OrientationPicker.vue
@@ -0,0 +1,493 @@
+<template>
+  <div v-if="parameter">
+    <v-card outline class="pa-5 mt-4 mr-2 mb-2">
+      <v-card-title>Board Orientation</v-card-title>
+      <div class="threejs-relative-container">
+        <v-card class="orientation-selector-overlay">
+          <parameter-label :param="parameter" label="AHRS_ORIENTATION" />
+          <v-select
+            v-model="selectedRotation"
+            :items="rotationsWithCustom"
+            return-object
+            :item-text="'name'"
+            @blur="handleRotationLeave"
+          >
+            <template #item="{ item, on, attrs }">
+              <v-list-item
+                v-bind="attrs"
+                v-on="on"
+                @mouseover="handleRotationHover(item)"
+              >
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-select>
+        </v-card>
+        <div class="threejs-container">
+          <div ref="threemount" class="threejsmount" />
+        </div>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { PropType } from 'vue'
+
+import { get_board_model } from '@/components/vehiclesetup/viewers/modelHelper'
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+
+// Import DRACO decoder files using Vite's glob import
+const dracoFiles = import.meta.glob('/node_modules/three/examples/jsm/libs/draco/*', { eager: true, as: 'url' })
+
+class Rotation {
+  name: string
+
+  roll: number
+
+  pitch: number
+
+  yaw: number
+
+  rotationNumber: number
+
+  constructor(name: string, roll: number, pitch: number, yaw: number, rotationNumber: number) {
+    this.name = name
+    this.roll = roll
+    this.pitch = pitch
+    this.yaw = yaw
+    this.rotationNumber = rotationNumber
+  }
+}
+
+export default {
+  name: 'OrientationPicker',
+  props: {
+    parameter: {
+      type: Object as PropType<Parameter | undefined>,
+      required: false,
+      default: undefined,
+    },
+    componentModel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      hoveredRotation: undefined as Rotation | undefined,
+      rotations: [
+        new Rotation('None', 0, 0, 0, 0),
+        new Rotation('Yaw45', 0, 0, 45, 1),
+        new Rotation('Yaw90', 0, 0, 90, 2),
+        new Rotation('Yaw135', 0, 0, 135, 3),
+        new Rotation('Yaw180', 0, 0, 180, 4),
+        new Rotation('Yaw225', 0, 0, 225, 5),
+        new Rotation('Yaw270', 0, 0, 270, 6),
+        new Rotation('Yaw315', 0, 0, 315, 7),
+        new Rotation('Roll180', 180, 0, 0, 8),
+        new Rotation('Yaw45Roll180', 180, 0, 45, 9),
+        new Rotation('Yaw90Roll180', 180, 0, 90, 10),
+        new Rotation('Yaw135Roll180', 180, 0, 135, 11),
+        new Rotation('Pitch180', 0, 180, 0, 12),
+        new Rotation('Yaw225Roll180', 180, 0, 225, 13),
+        new Rotation('Yaw270Roll180', 180, 0, 270, 14),
+        new Rotation('Yaw315Roll180', 180, 0, 315, 15),
+        new Rotation('Roll90', 90, 0, 0, 16),
+        new Rotation('Yaw45Roll90', 90, 0, 45, 17),
+        new Rotation('Yaw90Roll90', 90, 0, 90, 18),
+        new Rotation('Yaw135Roll90', 90, 0, 135, 19),
+        new Rotation('Roll270', 270, 0, 0, 20),
+        new Rotation('Yaw45Roll270', 270, 0, 45, 21),
+        new Rotation('Yaw90Roll270', 270, 0, 90, 22),
+        new Rotation('Yaw135Roll270', 270, 0, 135, 23),
+        new Rotation('Pitch90', 0, 90, 0, 24),
+        new Rotation('Pitch270', 0, 270, 0, 25),
+        new Rotation('Yaw90Pitch180', 0, 180, 90, 26),
+        new Rotation('Yaw270Pitch180', 0, 180, 270, 27),
+        new Rotation('Pitch90Roll90', 90, 90, 0, 28),
+        new Rotation('Pitch90Roll180', 180, 90, 0, 29),
+        new Rotation('Pitch90Roll270', 270, 90, 0, 30),
+        new Rotation('Pitch180Roll90', 90, 180, 0, 31),
+        new Rotation('Pitch180Roll270', 270, 180, 0, 32),
+        new Rotation('Pitch270Roll90', 90, 270, 0, 33),
+        new Rotation('Pitch270Roll180', 180, 270, 0, 34),
+        new Rotation('Pitch270Roll270', 270, 270, 0, 35),
+        new Rotation('Yaw90Pitch180Roll90', 90, 180, 90, 36),
+        new Rotation('Yaw270Roll90', 90, 0, 270, 37),
+        new Rotation('Yaw293Pitch68Roll180', 180, 68, 293, 38),
+        new Rotation('Pitch315', 0, 315, 0, 39),
+        new Rotation('Pitch315Roll90', 90, 315, 0, 40),
+        new Rotation('Pitch7', 0, 7, 0, 41),
+        new Rotation('Roll45', 45, 0, 0, 42),
+        new Rotation('Roll315', 315, 0, 0, 43),
+      ] as Rotation[],
+      unsupportedRotation: new Rotation('UNSUPPORTED', 0, 0, 0, -1),
+      object: undefined as THREE.Object3D | undefined,
+      camera: undefined as THREE.Camera | undefined,
+      scene: undefined as THREE.Scene | undefined,
+      renderer: undefined as THREE.WebGLRenderer | undefined,
+      vehicle_obj: undefined as THREE.Object3D | undefined,
+      arrows: [] as THREE.ArrowHelper[],
+      orbitControls: undefined as OrbitControls | undefined,
+    }
+  },
+  computed: {
+    threejs_canvas(): HTMLDivElement {
+      return this.$refs.threemount as HTMLDivElement
+    },
+    vehicle_model(): string | undefined {
+      return autopilot_data.vehicle_model
+    },
+    rotationsWithCustom(): Rotation[] {
+      if (this.isUnsupportedRotation) {
+        return [this.getUnsupportedRotation(), ...this.rotations]
+      }
+      return [...this.rotations].sort((a, b) => a.name.localeCompare(b.name))
+    },
+    isUnsupportedRotation(): boolean {
+      if (!this.parameter || this.parameter.value === undefined) {
+        return false
+      }
+
+      const paramValue = Number(this.parameter.value)
+      return !this.rotations.some((rotation) => rotation.rotationNumber === paramValue)
+    },
+    selectedRotation: {
+      get(): Rotation | undefined {
+        if (!this.parameter || this.parameter.value === undefined) {
+          return undefined
+        }
+
+        const paramValue = Number(this.parameter.value)
+        const matchingRotation = this.rotations.find((rotation) => rotation.rotationNumber === paramValue)
+
+        if (!matchingRotation) {
+          console.log(`Rotation ${paramValue} is not supported`)
+          return this.getUnsupportedRotation()
+        }
+
+        return matchingRotation
+      },
+      set(newValue: Rotation) {
+        if (this.parameter === undefined) {
+          return
+        }
+        mavlink2rest.setParam(
+          this.parameter.name,
+          newValue.rotationNumber,
+          autopilot_data.system_id,
+          this.parameter.paramType.type,
+        )
+        autopilot_data.setRebootRequired(true)
+      },
+    },
+  },
+  watch: {
+    selectedRotation(rotation) {
+      this.rotateObject(rotation)
+    },
+    componentModel() {
+      this.add_board_model()
+    },
+    vehicle_model() {
+      this.add_vehicle_model()
+    },
+  },
+  mounted() {
+    this.initializeThreeJS()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+    this.cleanupThreeJS()
+  },
+  methods: {
+    cleanupThreeJS() {
+      if (this.renderer) {
+        this.renderer.dispose()
+        this.renderer = undefined
+      }
+      if (this.scene) {
+        this.scene.clear()
+        this.scene = undefined
+      }
+      if (this.camera) {
+        this.camera = undefined
+      }
+      if (this.orbitControls) {
+        this.orbitControls.dispose()
+        this.orbitControls = undefined
+      }
+      if (this.object) {
+        this.object = undefined
+      }
+      if (this.vehicle_obj) {
+        this.vehicle_obj = undefined
+      }
+      this.arrows = []
+    },
+    initializeThreeJS() {
+      const scene = new THREE.Scene()
+      this.scene = scene
+      this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 100)
+      this.renderer = new THREE.WebGLRenderer({ antialias: true })
+      this.camera.position.set(0.3, 0.3, 0.3)
+      if (this.threejs_canvas) {
+        while (this.threejs_canvas.firstChild) {
+          this.threejs_canvas.removeChild(this.threejs_canvas.firstChild)
+        }
+        this.threejs_canvas.appendChild(this.renderer.domElement)
+      }
+      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
+
+      // Add lights
+      const ambientLight = new THREE.AmbientLight(0xffffff, 3.5)
+      ambientLight.castShadow = true
+      scene.add(ambientLight)
+
+      const directionalLight = new THREE.DirectionalLight(0xffffff, 2.0)
+      directionalLight.position.set(1, 1, 1)
+      directionalLight.castShadow = true
+      scene.add(directionalLight)
+
+      const pointLight = new THREE.PointLight(0xffffff, 0.5, 100)
+      pointLight.position.set(0, 10, 0)
+      pointLight.castShadow = true
+      scene.add(pointLight)
+
+      scene.background = new THREE.Color(0xffffff)
+
+      const animate = () : void => {
+        requestAnimationFrame(animate)
+        if (!this.renderer || !this.camera) {
+          return
+        }
+        this.renderer.render(scene, this.camera)
+      }
+      this.add_vehicle_model()
+      this.add_board_model()
+      this.resize()
+      this.rotateObject(this.selectedRotation)
+      animate()
+    },
+    rotateObject(rotation: Rotation | undefined) {
+      if (!rotation || !this.object) {
+        return
+      }
+
+      if (rotation.name.startsWith('UNSUPPORTED')) {
+        console.warn(`Not visualizing unsupported rotation (${rotation.rotationNumber})`)
+        this.object.visible = false
+        return
+      }
+
+      this.object.visible = true
+
+      // Convert degrees to radians
+      const rollRad = THREE.MathUtils.degToRad(rotation.roll)
+      const pitchRad = THREE.MathUtils.degToRad(rotation.pitch)
+      const yawRad = THREE.MathUtils.degToRad(rotation.yaw)
+
+      // 90° roll transformation to convert between coordinate systems
+      const preTransform = new THREE.Quaternion().setFromAxisAngle(
+        new THREE.Vector3(1, 0, 0),
+        Math.PI / 2,
+      )
+
+      // -90° roll inverse transformation
+      const postTransform = new THREE.Quaternion().setFromAxisAngle(
+        new THREE.Vector3(1, 0, 0),
+        -Math.PI / 2,
+      )
+
+      // Create rotation using aerospace 321 order (ZYX in Three.js)
+      const rotationQuaternion = new THREE.Quaternion()
+      const euler = new THREE.Euler(rollRad, pitchRad, yawRad, 'ZYX')
+      rotationQuaternion.setFromEuler(euler)
+
+      // Apply transformations in sequence
+      const finalQuaternion = new THREE.Quaternion()
+      finalQuaternion.copy(preTransform)
+      finalQuaternion.multiply(rotationQuaternion)
+      finalQuaternion.multiply(postTransform)
+
+      this.object.quaternion.copy(finalQuaternion)
+    },
+    add_vehicle_model() {
+      if (this.scene && this.vehicle_model) {
+        // Remove existing vehicle model if it exists
+        if (this.vehicle_obj) {
+          this.scene.remove(this.vehicle_obj)
+          this.vehicle_obj = undefined
+        }
+
+        const dracoLoader = new DRACOLoader()
+        // Get the base path from the imported DRACO files
+        const dracoWasmFile = Object.keys(dracoFiles).find((key) => key.includes('draco_decoder.wasm'))
+        if (dracoWasmFile) {
+          const basePath = dracoFiles[dracoWasmFile].replace(/[^/]*$/, '')
+          dracoLoader.setDecoderPath(basePath)
+        }
+        const loader = new GLTFLoader()
+        loader.setDRACOLoader(dracoLoader)
+        loader.load(
+          this.vehicle_model,
+          (gltf: GLTF) => {
+            gltf.scene.traverse((child: THREE.Object3D) => {
+              if (child instanceof THREE.Mesh) {
+                child.material = new THREE.MeshStandardMaterial({
+                  color: 0x666666,
+                  transparent: true,
+                  opacity: 0.05,
+                  depthTest: false,
+                  depthWrite: true,
+                  side: THREE.DoubleSide,
+                })
+              }
+            })
+            this.vehicle_obj = gltf.scene
+            // Rotate vehicle 90 degrees clockwise around Y axis
+            this.vehicle_obj.rotation.y = THREE.MathUtils.degToRad(90)
+            if (this.scene) {
+              this.scene.add(gltf.scene)
+            }
+          },
+          (progressEvent: ProgressEvent) => {
+            console.debug('Loading progress:', progressEvent)
+          },
+          (error: ErrorEvent) => {
+            console.error('An error occurred while loading the GLB model:', error)
+          },
+        )
+      }
+    },
+    async add_board_model() {
+      if (this.scene) {
+        try {
+          const dracoLoader = new DRACOLoader()
+          // Get the base path from the imported DRACO files
+          const dracoWasmFile = Object.keys(dracoFiles).find((key) => key.includes('draco_decoder.wasm'))
+          if (dracoWasmFile) {
+            const basePath = dracoFiles[dracoWasmFile].replace(/[^/]*$/, '')
+            dracoLoader.setDecoderPath(basePath)
+          }
+          const loader = new GLTFLoader()
+          loader.setDRACOLoader(dracoLoader)
+
+          const board_model = await get_board_model(this.componentModel)
+
+          let modelPath = ''
+          if (typeof board_model === 'string') {
+            modelPath = board_model
+          } else if (board_model && typeof board_model === 'object' && 'default' in board_model) {
+            const modelWithDefault = board_model as { default: string }
+            modelPath = modelWithDefault.default
+          }
+
+          if (!modelPath) {
+            console.error('Invalid board model path returned:', board_model)
+            return
+          }
+
+          loader.load(
+            modelPath,
+            (gltf: GLTF) => {
+              if (!this.scene) {
+                return
+              }
+              if (this.object) {
+                this.scene.remove(this.object)
+              }
+              this.object = gltf.scene
+              this.scene.add(gltf.scene)
+              this.rotateObject(this.selectedRotation)
+            },
+            (progressEvent: ProgressEvent) => {
+              console.debug('Loading progress:', progressEvent.loaded, progressEvent.total)
+            },
+            (error: ErrorEvent) => {
+              console.error('An error occurred while loading the GLB model:', error)
+            },
+          )
+        } catch (error) {
+          console.error('Error in add_board_model:', error)
+        }
+      }
+    },
+    resize() {
+      if (!this.camera || !this.renderer || !this.threejs_canvas) {
+        return
+      }
+      this.camera.aspect = this.threejs_canvas.clientWidth / this.threejs_canvas.clientHeight
+      this.camera.updateProjectionMatrix()
+      this.renderer.setSize(this.threejs_canvas.clientWidth, this.threejs_canvas.clientHeight)
+    },
+    getUnsupportedRotation(): Rotation {
+      if (!this.parameter || this.parameter.value === undefined) {
+        return this.unsupportedRotation
+      }
+
+      const paramValue = Number(this.parameter.value)
+      let valueDisplay = ''
+
+      if (this.parameter) {
+        valueDisplay = printParam(this.parameter)
+        if (!valueDisplay || valueDisplay === paramValue.toString()) {
+          valueDisplay = `Rotation ${paramValue}`
+        }
+      } else {
+        valueDisplay = `Rotation ${paramValue}`
+      }
+
+      const rotationName = `UNSUPPORTED - ${valueDisplay}`
+      return new Rotation(rotationName, 0, 0, 0, paramValue)
+    },
+    handleRotationHover(rotation: Rotation) {
+      this.hoveredRotation = rotation
+      this.rotateObject(rotation)
+    },
+    handleRotationLeave() {
+      this.hoveredRotation = undefined
+      this.rotateObject(this.selectedRotation)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.threejs-relative-container {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+.threejsmount {
+  width: 100%;
+  height: 100%;
+}
+
+.threejs-container {
+  width: 100%;
+  height: 100%;
+}
+
+.orientation-selector-overlay {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 2;
+  padding: 8px 12px 4px 12px;
+  min-width: 220px;
+  max-width: 320px;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/PwmSetup.vue b/core/frontend/src/components/vehiclesetup/PwmSetup.vue
index 00502c901c..39c3d1128b 100644
--- a/core/frontend/src/components/vehiclesetup/PwmSetup.vue
+++ b/core/frontend/src/components/vehiclesetup/PwmSetup.vue
@@ -136,7 +136,7 @@
                   <td v-tooltip="item.name">
                     {{ convert_servo_name(item.name) }}
                   </td>
-                  <td>{{ stringToUserFriendlyText(printParam(item)) }}</td>
+                  <td>{{ parameterToUserFriendlyText(item) }}</td>
                   <td>{{ servo_output[index] }}</td>
                 </tr>
               </tbody>
@@ -156,6 +156,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import { fetchCurrentBoard } from '@/components/autopilot/AutopilotManagerUpdater'
 import ServoFunctionEditorDialog from '@/components/parameter-editor/ServoFunctionEditorDialog.vue'
 import MotorDetection from '@/components/vehiclesetup/MotorDetection.vue'
 import VehicleViewer from '@/components/vehiclesetup/viewers/VehicleViewer.vue'
@@ -173,6 +174,7 @@ import { SERVO_FUNCTION } from '@/types/autopilot/parameter-sub-enums'
 import { Dictionary } from '@/types/common'
 import { armDisarm, doMotorTest } from '@/utils/ardupilot_mavlink'
 import mavlink_store_get from '@/utils/mavlink'
+import { servoNumberToGpio } from '@/utils/servoGpio'
 
 import ParameterSwitch from '../common/ParameterSwitch.vue'
 
@@ -376,6 +378,23 @@ export default Vue.extend({
       return output
         .map((_, i) => data[`servo${i + 1}_raw`])
     },
+    board_name(): string | undefined {
+      return autopilot.current_board?.name
+    },
+    gpio_to_parameter(): Record<number, Parameter> {
+      return Object.fromEntries(
+        autopilot_data.parameterRegex('^.*_PIN$')
+          .map((param) => [param.value, param]),
+      )
+    },
+    servo_to_gpio(): Record<number, number> {
+      return Object.fromEntries(
+        Array.from({ length: 16 }, (_, i) => {
+          const servo = i + 1
+          return [servo, servoNumberToGpio(servo, this.board_name)]
+        }),
+      )
+    },
   },
   watch: {
     is_armed() {
@@ -392,6 +411,8 @@ export default Vue.extend({
   mounted() {
     this.motor_zeroer_interval = setInterval(this.zero_motors, 300)
     this.motor_writer_interval = setInterval(this.write_motors, 100)
+    fetchCurrentBoard()
+
     mavlink.setMessageRefreshRate({ messageName: 'SERVO_OUTPUT_RAW', refreshRate: 10 })
     this.desired_armed_state = this.is_armed
     this.installListeners()
@@ -455,13 +476,28 @@ export default Vue.extend({
       this.selected_param = param
       this.edit_param_dialog = true
     },
+    parameterToUserFriendlyText(param: Parameter): string {
+      if (param.value === -1) { // GPIO
+        const servo_number = parseInt(/\d+/g.exec(param.name)?.[0] ?? '0', 10)
+        const gpio = this.servo_to_gpio[servo_number]
+        if (!gpio) {
+          return 'GPIO (Unknown)'
+        }
+        const param_using_this_gpio = this.gpio_to_parameter[gpio]
+        if (param_using_this_gpio) {
+          const pretty_name = param_using_this_gpio.name.split('_')[0].toLowerCase().toTitle()
+          return `GPIO [${pretty_name}]`
+        }
+        return `GPIO ${gpio} (Unknown)`
+      }
+      return this.stringToUserFriendlyText(printParam(param))
+    },
     stringToUserFriendlyText(text: string) {
       return param_value_map?.[this.vehicle_type ?? '']?.[text] ?? text
     },
     getParam(param: string): Parameter | undefined {
       return autopilot_data.parameter(param)
     },
-    printParam,
     zero_motors() {
       if (!this.is_manual) {
         return
diff --git a/core/frontend/src/components/vehiclesetup/SetupOverview.vue b/core/frontend/src/components/vehiclesetup/SetupOverview.vue
index 2577e9d3c9..9ec5d7a071 100755
--- a/core/frontend/src/components/vehiclesetup/SetupOverview.vue
+++ b/core/frontend/src/components/vehiclesetup/SetupOverview.vue
@@ -1,15 +1,21 @@
 <template>
-  <div>
+  <div class="mx-2">
     <v-row class="mt-5">
       <v-col
         cols="12"
         sm="7"
+        class="d-flex"
       >
-        <v-card class="pa-5 ma-2">
+        <v-card class="pa-5 flex-grow-1 d-flex flex-column">
           <vehicle-viewer
             :highlight="highlight"
             noannotations
             :autorotate="true"
+            class="flex-grow-1"
+            :style="{
+              'min-height': '400px',
+              width: '100%',
+            }"
           />
         </v-card>
       </v-col>
@@ -21,14 +27,20 @@
         <onboard-sensors />
       </v-col>
     </v-row>
-    <v-sheet class="d-flex">
-      <ping-info />
-      <video-overview />
-      <lights-info />
-      <gripper-info />
-      <leak-info />
-      <power-info />
-    </v-sheet>
+    <v-row class="mt-5 mb-5">
+      <v-col
+        v-for="component in bottomComponents"
+        :key="component"
+        cols="12"
+        sm="6"
+        md="4"
+      >
+        <component
+          :is="component"
+          class="fill-height"
+        />
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -62,6 +74,14 @@ export default Vue.extend({
   data() {
     return {
       highlight: null as string | null,
+      bottomComponents: [
+        'ping-info',
+        'video-overview',
+        'lights-info',
+        'gripper-info',
+        'leak-info',
+        'power-info',
+      ],
     }
   },
 })
diff --git a/core/frontend/src/components/vehiclesetup/configuration/ArdupilotVehicleBodySetup.vue b/core/frontend/src/components/vehiclesetup/configuration/ArdupilotVehicleBodySetup.vue
new file mode 100644
index 0000000000..931e678faa
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/ArdupilotVehicleBodySetup.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="main-container">
+    <v-card v-if="params_finished_loaded" outline class="pa-5 mt-4 mr-2 mb-2 main-card">
+      <v-card v-if="params_finished_loaded" outline class="pa-5 mt-4 mr-2 mb-2">
+        <v-card-title>
+          Frame <parameter-label :param="frame_parameter" label="" />
+        </v-card-title>
+        <FrameSelector
+          v-if="frame_parameter"
+          :parameter="frame_parameter"
+          @update:value="updateFrameValue"
+        />
+        <InlineParameterEditor
+          v-if="frame_type_parameter"
+          :param="frame_type_parameter"
+          :label="'Frame Subtype'"
+          :auto-set="true"
+        />
+      </v-card>
+      <OrientationPicker
+        v-if="params_finished_loaded"
+        :component-model="current_board"
+        :parameter="orientation_parameter"
+      />
+    </v-card>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+
+import {
+  fetchCurrentBoard,
+} from '@/components/autopilot/AutopilotManagerUpdater'
+import OrientationPicker from '@/components/vehiclesetup/OrientationPicker.vue'
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import { OneMoreTime } from '@/one-more-time'
+import autopilot_data from '@/store/autopilot'
+import autopilot from '@/store/autopilot_manager'
+import Parameter from '@/types/autopilot/parameter'
+
+import FrameSelector from './FrameSelector.vue'
+
+export default Vue.extend({
+  name: 'ArdupilotVehicleBodySetup',
+  components: {
+    OrientationPicker,
+    FrameSelector,
+  },
+  data() {
+    return {
+      fetch_board_task: new OneMoreTime({ delay: 10000, disposeWith: this }),
+    }
+  },
+  computed: {
+    current_board(): string | undefined {
+      return autopilot.current_board?.name
+    },
+    orientation_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('AHRS_ORIENTATION')
+    },
+    params_finished_loaded(): boolean {
+      return autopilot_data.finished_loading
+    },
+    frame_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('FRAME_CONFIG') || autopilot_data.parameter('FRAME_CLASS')
+    },
+    frame_type_parameter(): Parameter | undefined {
+      switch (autopilot_data.vehicle_type) {
+        case 'Submarine':
+        case 'Surface Boat':
+          return autopilot_data.parameter('FRAME_TYPE')
+        case 'Ground Rover':
+          return autopilot_data.parameter('FRAME_CLASS')
+        default:
+          return undefined
+      }
+    },
+  },
+  mounted() {
+    this.fetch_board_task.setAction(() => fetchCurrentBoard())
+    this.fetch_board_task.start()
+  },
+  methods: {
+    updateFrameValue(value: number) {
+      if (this.frame_parameter) {
+        mavlink2rest.setParam(
+          this.frame_parameter.name,
+          value,
+          autopilot_data.system_id,
+          this.frame_parameter.paramType.type,
+        )
+      }
+    },
+  },
+})
+</script>
+<style scoped="true">
+.main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+}
+
+.main-card {
+  min-width: 800px;
+}
+
+td {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/FrameSelector.vue b/core/frontend/src/components/vehiclesetup/configuration/FrameSelector.vue
new file mode 100644
index 0000000000..5d841919a2
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/FrameSelector.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="frame-selector">
+    <v-row v-if="parameter?.options">
+      <v-col
+        v-for="option in displayOptions"
+        :key="option.value"
+        cols="12"
+        :sm="!isExpanded ? '12' : '6'"
+        :md="!isExpanded ? '12' : '4'"
+        :lg="!isExpanded ? '12' : '3'"
+      >
+        <v-card
+          :class="{ 'selected-frame': isSelected(option.value) }"
+          class="frame-card"
+          :elevation="isSelected(option.value) ? 4 : 1"
+          @click="handleFrameClick(option.value)"
+        >
+          <generic-viewer
+            :modelpath="getModelPath(option.value)"
+            :autorotate="true"
+            :disable-zoom="true"
+            :noannotations="true"
+            :transparent="true"
+            :cameracontrols="false"
+            :style="{ width: '100%', height: !isExpanded ? '300px' : '250px' }"
+            :highlight="['Motor', 'Throttle']"
+            :camera-orbit="isSelected(option.value) ? '-45deg 65deg 1.4m' : '-45deg 55deg 1.4m'"
+          />
+          <v-card-title class="text-center">
+            {{ option.label }}
+          </v-card-title>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import autopilot from '@/store/autopilot_manager'
+import Parameter from '@/types/autopilot/parameter'
+
+import { frame_name, vehicle_folder } from '../viewers/modelHelper'
+
+export default Vue.extend({
+  name: 'FrameSelector',
+  props: {
+    parameter: {
+      type: Object as PropType<Parameter | undefined>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedValue: null as number | null,
+      isExpanded: false,
+    }
+  },
+  computed: {
+    frameOptions(): Array<{ value: number; label: string }> {
+      if (!this.parameter?.options) return []
+      return Object.entries(this.parameter.options).map(([value, label]) => ({
+        value: parseInt(value, 10),
+        label: label as string,
+      }))
+    },
+    displayOptions(): Array<{ value: number; label: string }> {
+      if (!this.isExpanded && this.selectedValue !== null) {
+        return this.frameOptions.filter(
+          (option: { value: number; label: string }) => option.value === this.selectedValue,
+        )
+      }
+      return this.frameOptions
+    },
+  },
+  mounted() {
+    if (this.parameter?.value !== undefined) {
+      this.selectedValue = this.parameter.value
+      this.isExpanded = false
+    }
+  },
+  methods: {
+    isSelected(value: number): boolean {
+      return this.selectedValue === value
+    },
+    handleFrameClick(value: number) {
+      if (this.selectedValue === value) {
+        this.isExpanded = !this.isExpanded
+      } else {
+        this.selectedValue = value
+        this.isExpanded = false
+        this.$emit('update:value', value)
+      }
+    },
+    getModelPath(frameValue: number): string {
+      if (!autopilot.vehicle_type) return ''
+      const frameName = this.frame_name(autopilot.vehicle_type, frameValue)
+      return `/assets/vehicles/models/${this.vehicleFolder()}/${frameName?.toUpperCase()}.glb`
+    },
+    vehicleFolder(): string {
+      return vehicle_folder()
+    },
+    frame_name,
+  },
+})
+</script>
+
+<style scoped>
+.frame-selector {
+  width: 100%;
+}
+
+.frame-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+}
+
+.frame-card:hover {
+  transform: translateY(-5px);
+}
+
+.selected-frame {
+  border: 2px solid var(--v-primary-base);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+model-viewer {
+  background-color: #f5f5f5;
+  border-radius: 4px 4px 0 0;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
index 4edd57669f..7d2ccaa14c 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
@@ -9,11 +9,11 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="imu in imus" :key="imu.deviceIdNumber">
-            <td>{{ imu.deviceName }}</td>
+          <tr v-for="accelerometer in ardupilot_sensors.accelerometers" :key="accelerometer.deviceIdNumber">
+            <td>{{ accelerometer.deviceName }}</td>
             <td>
               <v-icon
-                v-if="imu_is_calibrated[imu.param]"
+                v-if="ardupilot_sensors.accelerometers_calibrated[accelerometer.param]"
                 v-tooltip="'Sensor is calibrated and good to use'"
                 color="green"
               >
@@ -26,10 +26,12 @@
               >
                 mdi-emoticon-sad-outline
               </v-icon>
-              {{ imu_is_calibrated[imu.param] ? 'Calibrated' : 'Needs calibration' }}
+              {{ ardupilot_sensors.accelerometers_calibrated[accelerometer.param]
+                ? 'Calibrated'
+                : 'Needs calibration' }}
               <v-icon
-                v-if="imu_temperature_is_calibrated[imu.param].calibrated"
-                v-tooltip="`Sensor was calibrated at ${getCalibrationTemperature(imu)} ºC`"
+                v-if="ardupilot_sensors.accelerometers_temperature_calibrated[accelerometer.param].calibrated"
+                v-tooltip="`Sensor was calibrated at ${getCalibrationTemperature(accelerometer)} ºC`"
                 color="green"
               >
                 mdi-thermometer-check
@@ -48,6 +50,7 @@
       <v-card-actions class="justify-center">
         <FullAccelerometerCalibration />
         <QuickAccelerometerCalibration />
+        <LevelHorizonCalibration />
       </v-card-actions>
     </v-card>
   </div>
@@ -57,11 +60,10 @@ import Vue from 'vue'
 
 // eslint-disable-next-line
 import FullAccelerometerCalibration from '@/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue'
-import autopilot_data from '@/store/autopilot'
-import { Dictionary } from '@/types/common'
-import decode, { deviceId } from '@/utils/deviceid_decoder'
+import ardupilot_sensors, { ArdupilotSensorsStore } from '@/store/ardupilot_sensors'
+import { deviceId } from '@/utils/deviceid_decoder'
 
-import { imu_is_calibrated, imu_temperature_is_calibrated } from '../common'
+import LevelHorizonCalibration from '../compass/LevelHorizonCalibration.vue'
 import QuickAccelerometerCalibration from './QuickAccelerometerCalibration.vue'
 
 export default Vue.extend({
@@ -69,27 +71,20 @@ export default Vue.extend({
   components: {
     FullAccelerometerCalibration,
     QuickAccelerometerCalibration,
+    LevelHorizonCalibration,
   },
   data() {
     return {
     }
   },
   computed: {
-    imus() : deviceId[] {
-      return autopilot_data.parameterRegex('^INS_ACC.*_ID')
-        .filter((param) => param.value !== 0)
-        .map((parameter) => decode(parameter.name, parameter.value))
-    },
-    imu_is_calibrated(): Dictionary<boolean> {
-      return imu_is_calibrated(this.imus, autopilot_data)
-    },
-    imu_temperature_is_calibrated(): Dictionary<{ calibrated: boolean, calibrationTemperature: number }> {
-      return imu_temperature_is_calibrated(this.imus, autopilot_data)
+    ardupilot_sensors(): ArdupilotSensorsStore {
+      return ardupilot_sensors
     },
   },
   methods: {
     getCalibrationTemperature(imu: deviceId) {
-      return this.imu_temperature_is_calibrated[imu.param].calibrationTemperature.toFixed(0)
+      return ardupilot_sensors.accelerometers_temperature_calibrated[imu.param].calibrationTemperature.toFixed(0)
     },
   },
 })
diff --git a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
index 4e3dc38c72..97ed6cd4a2 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
@@ -33,6 +33,12 @@
       >
         <strong>{{ current_state_text }}</strong>
       </v-alert>
+      <generic-viewer
+        :autorotate="false"
+        :transparent="false"
+        :cameracontrols="false"
+        :orientation="current_state_3D"
+      />
       <v-card-actions class="justify-center">
         <v-btn v-if="show_start_button" :loading="start_button_loading" class="primary" @click="startCalibration">
           Start Calibration
@@ -50,6 +56,7 @@
 
 <script lang="ts">
 
+import GenericViewer from '@/components/vehiclesetup/viewers/GenericViewer.vue'
 import mavlink2rest from '@/libs/MAVLink2Rest'
 import { MavCmd } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
 import autopilot_data from '@/store/autopilot'
@@ -85,6 +92,7 @@ enum CalState {
 export default {
   name: 'FullAccelerometerCalibration',
   components: {
+    GenericViewer,
   },
   data() {
     return {
@@ -124,7 +132,18 @@ export default {
         [CalState.SUCCESS]: 'Calibration Successful',
         [CalState.FAIL]: 'Calibration Failed',
       }
-      return AccelStateText[Number(this.state)] ?? ''
+      return AccelStateText[Number(this.state)] ?? 'Unknown state'
+    },
+    current_state_3D() {
+      const AccelStateText: { [key: number]: string } = {
+        [CalState.WAITING_FOR_LEVEL_POSITION]: '0deg 0deg 0deg',
+        [CalState.WAITING_FOR_LEFT_POSITION]: '-90deg 0deg 0deg',
+        [CalState.WAITING_FOR_RIGHT_POSITION]: '90deg 0deg 0deg',
+        [CalState.WAITING_FOR_NOSEDOWN_POSITION]: '0deg 90deg 0deg',
+        [CalState.WAITING_FOR_NOSEUP_POSITION]: '0deg -90deg 0deg',
+        [CalState.WAITING_FOR_BACK_POSITION]: '0deg 180deg 0deg',
+      }
+      return AccelStateText[Number(this.state)] ?? '0deg 0deg 0deg'
     },
     current_state_type() {
       if (this.state === CalState.SUCCESS) {
@@ -222,7 +241,3 @@ export default {
   },
 }
 </script>
-
-  <style scoped>
-
-  </style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/QuickAccelerometerCalibration.vue b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/QuickAccelerometerCalibration.vue
index fdae5b18d2..ffe18855fd 100755
--- a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/QuickAccelerometerCalibration.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/QuickAccelerometerCalibration.vue
@@ -121,7 +121,3 @@ export default {
   },
 }
 </script>
-
-  <style scoped>
-
-  </style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/camera.vue b/core/frontend/src/components/vehiclesetup/configuration/camera.vue
index 4dfacd66db..cb88592c7e 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/camera.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/camera.vue
@@ -8,8 +8,8 @@
         <v-row>
           <v-col>
             <p v-if="!type_param">
-              Camera mount setup is not supported on this Firmware (MNT1_TYPE param not found).
-              please update to a newer version.
+              Camera mount setup is not supported on this firmware (MNT1_TYPE param not found).
+              Please update to a newer autopilot firmware version.
             </p>
             <v-select
               v-if="is_servo_type"
@@ -20,7 +20,7 @@
               label="Mount 1 Pitch Servo"
             />
             <p v-else-if="type_param">
-              Mount is disabled. Enable it by setting the 'Gimbal Type' to 'Servo'
+              Mount is disabled. Enable it by setting the 'Gimbal Type' to 'Servo'.
             </p>
 
             <v-row>
@@ -52,7 +52,7 @@
               <v-card-text>
                 <v-row class="ma-3">
                   <p>
-                    To find the physical limites of the servo, move the camera to the minimum and maximum positions,
+                    To find the physical limits of the servo, move the camera to the minimum and maximum positions,
                     then adjust the minimum/maximum PWMs values until it reaches the furthest it can move
                     without hitting other components.
                   </p>
@@ -91,8 +91,9 @@
               <v-card-text>
                 <v-row class="ma-3">
                   <p>
-                    Measure the found limits and input them below.
-                    This will allow Ardupilot to know how to convert PWM to angle.
+                    Measure the rotation limit angles and input them below.
+                    This will allow Ardupilot to accurately report the camera rotation angle
+                    from its commanded servo PWM value.
                   </p>
                   <v-col>
                     <InlineParameterEditor
@@ -117,10 +118,10 @@
                   <v-col>
                     <strong>Calculated PWM/degree:</strong> {{ pwm_per_deg.toFixed(2) }} <br>
                     <p>
-                      This represents how much the PWM value changes per degree. use this to
+                      This represents how much the PWM value changes per degree. Use this to
                       verify against your servo specs.
                       One that reaches +-45º with 1100-1900 PWM (all current BlueRobotics servos),
-                      has a ratio of 8.88us per degree.
+                      has a ratio of 8.88µs per degree.
                       This can help you make sure you measured the angles correctly.
                     </p>
                   </v-col>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/common.ts b/core/frontend/src/components/vehiclesetup/configuration/common.ts
deleted file mode 100755
index 8420584c19..0000000000
--- a/core/frontend/src/components/vehiclesetup/configuration/common.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { AutopilotStore } from "@/store/autopilot"
-import { Dictionary } from "@/types/common"
-import { deviceId } from "@/utils/deviceid_decoder"
-
-export function imu_is_calibrated(imus: deviceId[], autopilot_data: AutopilotStore) {
-  const results = {} as Dictionary<boolean>
-  for (const imu of imus) {
-    const param_radix = imu.param.split('_ID')[0]
-    const offset_params_names = [`${param_radix}OFFS_X`, `${param_radix}OFFS_Y`, `${param_radix}OFFS_Z`]
-    const scale_params_names = [`${param_radix}SCAL_X`, `${param_radix}SCAL_Y`, `${param_radix}SCAL_Z`]
-    const offset_params = offset_params_names.map(
-      (name) => autopilot_data.parameter(name),
-    )
-    const scale_params = scale_params_names.map(
-      (name) => autopilot_data.parameter(name),
-    )
-    const is_at_default_offsets = offset_params.every((param) => param?.value === 0.0)
-    const is_at_default_scale = scale_params.every((param) => param?.value === 1.0)
-    results[imu.param] = offset_params.isEmpty() || scale_params.isEmpty()
-    || !is_at_default_offsets || !is_at_default_scale
-  }
-  return results
-}
-
-export function imu_temperature_is_calibrated(imus: deviceId[], autopilot_data: AutopilotStore): Dictionary<{ calibrated: boolean, calibrationTemperature: number }> {
-  const results = {} as Dictionary<{ calibrated: boolean, calibrationTemperature: number }>
-  for (const imu of imus) {
-    let param_radix = imu.param.split('_ID')[0]
-    // CALTEMP parameters contains ID for the first sensor, _ID does not, so we need to add it
-    if (!/\d$/.test(param_radix)) {
-      param_radix += '1'
-    }
-    const name = `${param_radix}_CALTEMP`
-    const parameter = autopilot_data.parameter(name)
-    results[imu.param] = {
-      calibrated: parameter !== undefined && parameter.value !== -300,
-      calibrationTemperature: parameter?.value ?? 0,
-    }
-  }
-  return results
-}
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue
index 7bd442b135..ea20328104 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue
@@ -38,9 +38,8 @@
                   </v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <p>
-                      This does a full calibration of the compasses.
-                      It requires you to spin the vehicle around manually multiple times.
-                      You need to move the vehicle around in all 3 axis.
+                      Perform a full calibration of the selected compass(es) by manually spinning
+                      the vehicle around multiple times, about all 3 rotation axes.
                     </p>
                     <full-compass-calibrator :compasses="compasses" />
                   </v-expansion-panel-content>
@@ -51,10 +50,9 @@
                   </v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <p>
-                      This does a "quick" calibration of your compass.
-                      You need to point your vehicle North,and then click the button.
-                      This results in a much less accurate calibration, but is also much faster.
-                      It can be a good starting point for calibration, followed by <b>CompassLearn</b>.
+                      Perform a quick, low-accuracy calibration of the compass(es) by pointing
+                      your vehicle North, then clicking the Calibrate button.
+                      It can be a good starting point for calibration, followed by <b>Compass Learn</b>.
                     </p>
                     <large-vehicle-compass-calibrator :compasses="compasses" />
                   </v-expansion-panel-content>
@@ -66,9 +64,9 @@
                   </v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <p>
-                      This allows automatic "calibration" of compass offsets. You need to have a valid world position.
-                      In order to use this option, click the following button and then drive the vehicle around until
-                      you see the message <b>"CompassLearn: finished"</b>
+                      Automatically "learn" compass calibration offsets by driving the vehicle around until
+                      enough data has been collected, and <b>"CompassLearn: finished"</b> is displayed.
+                      A valid global region estimate is required.
                     </p>
                     <compass-learn :compasses="compasses" />
                   </v-expansion-panel-content>
@@ -79,11 +77,14 @@
                   </v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <p>
-                      This used logs from previous flights to calibrate the compasses.
+                      Calibrate the compass(es) using a previous flight log.
                       This usually gives the best results.
-                      While it is not currently implemented here. It can be done either in
-                      <a href="https://firmware.ardupilot.org/Tools/WebTools/">Ardupilot WebTools</a> and
-                      <a href="https://plotbeta.ardupilot.org/">LogViewer</a>.
+                      While it is not currently implemented here, the compass offset information can be
+                      determined in the Log Browser page. Press the green play button on a log file,
+                      click the three vertical dots in the sidebar, open the <b>Mag Fit Tool</b>,
+                      specify the general global region where the log was created, then click "Fit"
+                      for each compass you wish to calibrate. Resulting values can be copied across to
+                      the COMPASS_* autopilot parameters.
                     </p>
                   </v-expansion-panel-content>
                 </v-expansion-panel>
@@ -122,8 +123,8 @@
             </v-tab>
           </draggable>
           <v-card outlined class="ml-auto mr-auto rounded-lg pa-3" style="max-width: 200px;">
-            To change the order of the compasses, drag them up and down in this list using the drag handler.
-            This Operation requires an autopilot restart.
+            Click-and-drag the dots to change the priority of the compass options.
+            Adjusted compass priorities are applied once the autopilot restarts.
           </v-card>
           <v-tab-item
             v-for="(compass, index) in compasses"
@@ -150,7 +151,7 @@
                       />
                     </div>
                     <div v-else>
-                      This Compass is not in use, move it higher in the list in order to be able to use it
+                      This Compass is not in use, drag it higher (by the dots) to be able to use it.
                     </div>
                     <b>External/Internal:</b>
                     <v-btn class="ml-8 mb-4 mt-2" fab x-small @click="openParameterEditor(compass_extern_param[index])">
@@ -371,7 +372,7 @@ export default Vue.extend({
             calibration: CalibrationType.FULL_NO_WMM,
             color: 'var(--v-warning-darken1)',
             alert: 'warning',
-            description: 'Calibrated, but without a known (detected or specified) global position, '
+            description: 'Calibrated, but without a known (detected or specified) global region, '
             + 'so no corrections were applied from the internal World Magnetic Model (WMM). '
             + 'Consider retrying with a valid position to improve compass performance.',
             calibration_short: 'Calibrated (No WMM)',
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue
index 2b3a541a2b..951e6cefd6 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue
@@ -204,7 +204,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue
index 87382c3666..06ca45a38c 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue
@@ -22,12 +22,12 @@
         Compass Calibration Learning
       </v-card-title>
       <v-card-text>
-        A valid position is required for Compass Learn to estimate the local world magnetic field.
+        A valid global region is required for Compass Learn to estimate the local world magnetic field.
         <auto-coordinate-detector
           v-model="coordinates"
         />
-        Make sure you have a valid position, then click start and drive the vehicle around in
-        manual mode until you see the message "CompassLearn: finished"
+        Make sure you have a valid region/position specified, then click start and drive the vehicle around
+        in manual mode until you see the message <b>"CompassLearn: finished"</b>.
         <v-divider />
         <v-alert
           v-if="status_text"
@@ -146,7 +146,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue
index e18a1fc053..2b702c7a84 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue
@@ -92,9 +92,6 @@ table {
 th, td {
   border: 1px solid #ddd;
   padding: 8px;
-}
-
-th, td {
   cursor: pointer;
 }
 
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/FullCompassCalibrator.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/FullCompassCalibrator.vue
index a5a947d6d1..bf078a46cf 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/FullCompassCalibrator.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/FullCompassCalibrator.vue
@@ -20,18 +20,18 @@
       <v-card-text class="pa-10">
         <span v-if="state === states.IDLE">
           <p>
-            <strong> Onboard Compass Calibration</strong> is the regular calibration used
-            for Ardupilot vehicles.
-            It requires you to spin the vehicle aroung all axis, which allows it to calibrated the
+            <strong>Onboard Compass Calibration</strong> is the regular calibration used
+            for ArduPilot vehicles.
+            It requires spinning the vehicle around all axes, which allows it to calibrate the
             readings to the expected local magnetic field.
           </p>
           <p>
-            A Valid position is <strong>recomended</strong> for Onboard Calibration to estimate the
-            local world magnetic field.
+            A valid global region/position is <strong>recomended</strong> for Onboard Calibration to
+            estimate the local world magnetic field.
           </p>
         </span>
         <span v-else-if="state === states.CALIBRATING">
-          Spin your vehicle around all of its axis until the progress bar completes.
+          Spin your vehicle around all of its axes until the progress bar completes.
         </span>
 
         <auto-coordinate-detector
@@ -81,7 +81,7 @@
         <v-btn
           v-if="state !== states.CALIBRATING && state !== states.FAILED"
           color="primary"
-          :disabled="!compass_mask"
+          :disabled="!compass_mask || !coordinates"
           @click="calibrate()"
         >
           Calibrate
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue
index 9d63f24f92..f30bb403b3 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue
@@ -18,7 +18,7 @@
         Large Vehicle Compass Calibration
       </v-card-title>
       <v-card-text>
-        A Valid position is required for Compass Learn to estimate the local world magnetic field.
+        A valid global region/position is required to estimate the local world magnetic field.
         <auto-coordinate-detector
           v-model="coordinates"
         />
@@ -33,7 +33,7 @@
         <StatusTextWatcher :style="`display : ${status_type === 'error' ? 'block' : 'none'};`" />
       </v-card-text>
       <v-card-actions class="justify-center">
-        <v-btn color="primary" :disabled="calibrating || !compass_mask" @click="calibrate()">
+        <v-btn color="primary" :disabled="calibrating || !compass_mask || !coordinates" @click="calibrate()">
           Calibrate
         </v-btn>
         <reboot-button />
@@ -117,7 +117,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/LevelHorizonCalibration.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/LevelHorizonCalibration.vue
new file mode 100644
index 0000000000..e893bd7a71
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/LevelHorizonCalibration.vue
@@ -0,0 +1,194 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="600"
+  >
+    <template #activator="{ on, attrs }">
+      <v-btn
+        color="primary"
+        v-bind="attrs"
+        v-on="on"
+      >
+        Level Horizon
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title class="text-h5">
+        Accelerometer Calibration
+      </v-card-title>
+      <v-card-text>
+        <div>
+          Horizon calibration trims the pitch and roll of the vehicle's
+          inertial sensors to adjust for small deviations from level.
+        </div>
+        <div class="attitude-container mt-4">
+          <svg
+            viewBox="-120 -120 240 240"
+            class="attitude-indicator"
+          >
+            <defs>
+              <clipPath id="horizon-clip">
+                <circle r="100" />
+              </clipPath>
+            </defs>
+            <g clip-path="url(#horizon-clip)">
+              <g :transform="`rotate(${rollDeg}) translate(0, ${pitchOffset})`">
+                <rect x="-150" y="-150" width="300" height="150" fill="#3a8fd6" />
+                <rect x="-150" y="0" width="300" height="150" fill="#6b4a2a" />
+                <line x1="-150" y1="0" x2="150" y2="0" stroke="white" stroke-width="1.5" />
+                <line
+                  v-for="tick in pitchTicks"
+                  :key="`tick-${tick}`"
+                  :x1="tick === 0 ? -30 : -15"
+                  :y1="-tick * pitchScale"
+                  :x2="tick === 0 ? 30 : 15"
+                  :y2="-tick * pitchScale"
+                  stroke="white"
+                  stroke-width="0.8"
+                  opacity="0.7"
+                />
+              </g>
+            </g>
+            <circle r="100" fill="none" stroke="#333" stroke-width="3" />
+            <!-- Fixed aircraft reference -->
+            <line x1="-35" y1="0" x2="-10" y2="0" stroke="#ffa000" stroke-width="3" stroke-linecap="round" />
+            <line x1="10" y1="0" x2="35" y2="0" stroke="#ffa000" stroke-width="3" stroke-linecap="round" />
+            <circle r="4" fill="none" stroke="#ffa000" stroke-width="2.5" />
+          </svg>
+          <div class="attitude-readout">
+            <span>Roll: {{ rollDeg.toFixed(1) }}°</span>
+            <span>Pitch: {{ pitchDeg.toFixed(1) }}°</span>
+          </div>
+        </div>
+        <v-alert
+          v-if="status_text"
+          :type="status_type"
+          class="mt-2"
+        >
+          {{ status_text }}
+        </v-alert>
+        <status-text-watcher :style="`display : ${status_type === 'error' ? 'block' : 'none'};`" />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" :disabled="calibrating" @click="calibrate()">
+          Calibrate
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import { MavCmd, MavResult } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
+import autopilot_data from '@/store/autopilot'
+import mavlink from '@/store/mavlink'
+import { Dictionary } from '@/types/common'
+import mavlink_store_get from '@/utils/mavlink'
+
+const RAD_TO_DEG = 180 / Math.PI
+const PITCH_SCALE = 2
+
+export default Vue.extend({
+  name: 'LevelHorizonCalibration',
+  data() {
+    return {
+      dialog: false,
+      calibrating: false,
+      status_type: undefined as string | undefined,
+      status_text: undefined as string | undefined,
+      pitchTicks: [-20, -10, 0, 10, 20],
+      pitchScale: PITCH_SCALE,
+    }
+  },
+  computed: {
+    attitude(): Dictionary<number> | null {
+      return mavlink_store_get(mavlink, 'ATTITUDE.messageData.message') as Dictionary<number> | null
+    },
+    rollDeg(): number {
+      return -(this.attitude?.roll ?? 0) * RAD_TO_DEG
+    },
+    pitchDeg(): number {
+      return (this.attitude?.pitch ?? 0) * RAD_TO_DEG
+    },
+    pitchOffset(): number {
+      return this.pitchDeg * PITCH_SCALE
+    },
+  },
+  watch: {
+    dialog(open: boolean) {
+      if (open) {
+        mavlink.setMessageRefreshRate({ messageName: 'ATTITUDE', refreshRate: 10 })
+      } else {
+        this.status_text = undefined
+        this.status_type = undefined
+      }
+    },
+  },
+  methods: {
+    calibrationFinished() {
+      this.status_type = 'success'
+      this.status_text = 'Calibration finished'
+      this.calibrating = false
+      autopilot_data.setRebootRequired(true)
+    },
+    calibrationFailed(error: string) {
+      this.status_text = `Calibration failed: ${error}`
+      this.status_type = 'error'
+      this.calibrating = false
+    },
+    async calibrate() {
+      this.status_text = undefined
+      this.status_type = undefined
+      this.calibrating = true
+      this.levelHorizon()
+      try {
+        const ack = await mavlink2rest.waitForAck(MavCmd.MAV_CMD_PREFLIGHT_CALIBRATION)
+        if (ack.result.type !== MavResult.MAV_RESULT_ACCEPTED) {
+          throw new Error(`Unexpected result: ${ack.result.type}`)
+        }
+        this.calibrationFinished()
+      } catch (error) {
+        this.calibrationFailed(`${error}`)
+      }
+    },
+    levelHorizon() {
+      mavlink2rest.sendCommandLong(
+        MavCmd.MAV_CMD_PREFLIGHT_CALIBRATION,
+        0,
+        0,
+        0,
+        0,
+        2, // Level Horizon
+        0,
+        0,
+      )
+    },
+  },
+})
+</script>
+
+<style scoped>
+.attitude-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.attitude-indicator {
+  width: 200px;
+  height: 200px;
+}
+
+.attitude-readout {
+  display: flex;
+  gap: 24px;
+  margin-top: 8px;
+  font-family: monospace;
+  font-size: 14px;
+  opacity: 0.8;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue b/core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue
index 41b6200939..5639429acf 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue
@@ -2,6 +2,7 @@
   <v-card
     v-if="all_required_params_are_available"
     elevation="2"
+    :class="{ 'disabled-failsafe': is_disabled }"
     class="mb-4 mt-4 pa-4 d-flex flex-row  flex-grow-0 justify-left failsafe-card"
   >
     <div class="ma-4">
@@ -24,7 +25,12 @@
               {{ param.replacementTitle ?? param.name }}
             </v-col>
             <v-col :key="`${param.name}-editor`" cols="5" class="pt-1 pb-1">
-              <inline-parameter-editor :key="failsafeDefinition.name" :auto-set="true" :param="params[param.name]" />
+              <inline-parameter-editor
+                :key="failsafeDefinition.name"
+                :auto-set="true"
+                :disabled="is_disabled && param.name !== actionParamName"
+                :param="params[param.name]"
+              />
             </v-col>
           </v-row>
         </div>
@@ -74,6 +80,16 @@ export default Vue.extend({
     available_params(): ParamDefinitions[] {
       return this.failsafeDefinition.params.filter((param) => param.name in this.params)
     },
+    is_disabled(): boolean {
+      const controlParam = this.findControlParam()
+      if (!controlParam || !(controlParam.name in this.params)) {
+        return false
+      }
+      return this.params[controlParam.name].value === 0
+    },
+    actionParamName(): string | undefined {
+      return this.findControlParam()?.name
+    },
   },
   mounted() {
     this.loadImage()
@@ -84,6 +100,18 @@ export default Vue.extend({
         this.image = response.data
       })
     },
+    findControlParam(): ParamDefinitions | undefined {
+      const enableParam = this.failsafeDefinition.params.find(
+        (p) => p.replacementTitle === 'Enable' || p.name.includes('_ENABLE'),
+      )
+      if (enableParam) {
+        return enableParam
+      }
+
+      return this.failsafeDefinition.params.find(
+        (p) => p.replacementTitle === 'Action',
+      )
+    },
   },
 
 })
@@ -106,4 +134,35 @@ i.svg-icon svg {
   text-align: end;
   margin: auto;
 }
+
+.disabled-failsafe {
+  border: 1px solid var(--v-warning-base) !important;
+  position: relative;
+}
+
+.disabled-failsafe:hover {
+  border-color: var(--v-warning-lighten1) !important;
+  box-shadow: 0 2px 8px rgba(224, 166, 0, 0.2);
+}
+
+.disabled-failsafe::after {
+  content: 'DISABLED';
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: var(--v-warning-base);
+  color: white;
+  padding: 3px 6px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.disabled-failsafe .svg-icon {
+  opacity: 0.7;
+  filter: grayscale(30%);
+}
 </style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue b/core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue
index 2e64156409..f7f24314cf 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="params_finished_loaded" class="pt-1 pb-1">
-    <div class="ma-3 pa-1 d-flex flex-row flex-wrap flex-grow-0 justify-center">
+    <div class="ma-3 pa-1 d-flex flex-row flex-wrap flex-grow-0 justify-center failsafes-container">
       <failsafe-card
         v-for="failsafeDefinition in failsafes"
         :key="failsafeDefinition.name"
@@ -17,7 +17,7 @@ import autopilot_data from '@/store/autopilot'
 import { FailsafeDefinition } from './types'
 
 export default {
-  name: 'FailsafesConfigration',
+  name: 'FailsafesConfiguration',
   components: {
     failsafeCard,
   },
@@ -114,44 +114,6 @@ export default {
             },
           ],
         },
-        {
-          name: 'Excess Internal Pressure',
-          generalDescription: 'Triggers when the internal pressure is too high. This may help to detect a leak, '
-          + 'and to avoid rapid unplanned disassembly.',
-          image: (await import('@/assets/img/configuration/failsafes/pressure.svg')).default as string,
-          params: [
-
-            {
-              replacementTitle: 'Maximum internal pressure',
-              icon: 'mdi-gauge-full',
-              name: 'FS_PRESS_MAX',
-            },
-            {
-              replacementTitle: 'Action',
-              icon: 'mdi-lightning-bolt',
-              name: 'FS_PRESS_ENABLE',
-            },
-          ],
-        },
-        {
-          name: 'Excess Internal Temperature',
-          generalDescription: 'Triggers when the internal temperature is too high. This may help to prevent '
-          + 'damage to electronics due to overheating.',
-          image: (await import('@/assets/img/configuration/failsafes/temperature.svg')).default as string,
-          params: [
-
-            {
-              replacementTitle: 'Maximum internal temperature',
-              icon: 'mdi-thermometer-high',
-              name: 'FS_TEMP_MAX',
-            },
-            {
-              replacementTitle: 'Action',
-              icon: 'mdi-lightning-bolt',
-              name: 'FS_TEMP_ENABLE',
-            },
-          ],
-        },
         {
           name: 'Low Battery',
           generalDescription: 'Triggers when the voltage goes below specified thresholds.\n This can help to avoid '
@@ -191,6 +153,44 @@ export default {
             },
           ],
         },
+        {
+          name: 'Excess Internal Pressure',
+          generalDescription: 'Triggers when the internal pressure is too high. This may help to detect a leak, '
+          + 'and to avoid rapid unplanned disassembly.',
+          image: (await import('@/assets/img/configuration/failsafes/pressure.svg')).default as string,
+          params: [
+
+            {
+              replacementTitle: 'Maximum internal pressure',
+              icon: 'mdi-gauge-full',
+              name: 'FS_PRESS_MAX',
+            },
+            {
+              replacementTitle: 'Action',
+              icon: 'mdi-lightning-bolt',
+              name: 'FS_PRESS_ENABLE',
+            },
+          ],
+        },
+        {
+          name: 'Excess Internal Temperature',
+          generalDescription: 'Triggers when the internal temperature is too high. This may help to prevent '
+          + 'damage to electronics due to overheating.',
+          image: (await import('@/assets/img/configuration/failsafes/temperature.svg')).default as string,
+          params: [
+
+            {
+              replacementTitle: 'Maximum internal temperature',
+              icon: 'mdi-thermometer-high',
+              name: 'FS_TEMP_MAX',
+            },
+            {
+              replacementTitle: 'Action',
+              icon: 'mdi-lightning-bolt',
+              name: 'FS_TEMP_ENABLE',
+            },
+          ],
+        },
         {
           name: 'Sensor Fusion Uncertainty',
           generalDescription: 'Triggers when the EKF variances surpass a given threshold, '
@@ -233,4 +233,8 @@ export default {
   column-gap: 10px;
   padding: 10px;
 }
+
+.failsafes-container {
+  gap: 8px;
+}
 </style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/lights.vue b/core/frontend/src/components/vehiclesetup/configuration/lights.vue
index 8fceb64f65..1397d78389 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/lights.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/lights.vue
@@ -3,7 +3,7 @@
     <v-card>
       <v-card-title> Lights 1 (RCIN9) </v-card-title>
       <v-card-text>
-        Here you can configure what pin outputs the signal for the first set of lights.
+        The output pin for the primary set of lights:
         <v-select
           v-model="lights1_new_param"
           :items="servo_params"
@@ -16,7 +16,7 @@
     <v-card>
       <v-card-title> Lights 2 (RCIN10) </v-card-title>
       <v-card-text>
-        What pin outputs the signal for the second set of lights.
+        The output pin for the secondary set of lights:
         <v-select
           v-model="lights2_new_param"
           :items="servo_params"
@@ -29,7 +29,7 @@
     <v-card>
       <v-card-title> Joystick steps </v-card-title>
       <v-card-text>
-        How many button presses it takes to go from 0% to 100% brightness.
+        Number of button presses to step from 0% to 100% brightness:
         <br>
         {{ light_steps?.value }} steps result in a {{ (100 / light_steps?.value).toFixed(1) }}%
         increase per button press.
diff --git a/core/frontend/src/components/vehiclesetup/configuration/power/BatteryCard.vue b/core/frontend/src/components/vehiclesetup/configuration/power/BatteryCard.vue
new file mode 100644
index 0000000000..30a0cdf172
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/power/BatteryCard.vue
@@ -0,0 +1,459 @@
+<template>
+  <v-card class="battery-card mb-4" elevation="2">
+    <v-card-title class="d-flex align-center">
+      <v-icon left>
+        mdi-battery
+      </v-icon>
+      {{ title }}
+      <v-spacer />
+      <span v-if="voltage != null" class="subtitle-1">
+        {{ voltage.toFixed(2) }} V / {{ (current ?? 0).toFixed(2) }} A
+      </span>
+    </v-card-title>
+    <v-card-text>
+      <v-row dense align="center">
+        <v-col cols="5" class="label-col">
+          <parameter-label label="Battery Monitor" :param="monitorParam" />
+        </v-col>
+        <v-col cols="7">
+          <inline-parameter-editor
+            :param="monitorParam"
+            :auto-set="true"
+          />
+        </v-col>
+      </v-row>
+
+      <template v-if="monitor_enabled">
+        <v-divider class="my-2" />
+
+        <v-row dense align="center">
+          <v-col cols="5" class="label-col">
+            Power Sensor
+          </v-col>
+          <v-col cols="7">
+            <v-select
+              v-model="selected_sensor"
+              :items="sensor_options"
+              dense
+              hide-details
+              @change="applySensorPreset"
+            />
+          </v-col>
+        </v-row>
+
+        <v-btn
+          text
+          x-small
+          class="mt-2"
+          @click="show_advanced = !show_advanced"
+        >
+          <v-icon left x-small>
+            {{ show_advanced ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+          </v-icon>
+          {{ show_advanced ? 'Hide' : 'Show' }} Advanced
+        </v-btn>
+
+        <v-expand-transition>
+          <div v-if="show_advanced">
+            <v-divider class="my-2" />
+
+            <v-row v-if="voltPinParam" dense align="center">
+              <v-col cols="5" class="label-col">
+                <parameter-label label="Voltage Pin" :param="voltPinParam" />
+              </v-col>
+              <v-col cols="7">
+                <inline-parameter-editor
+                  :param="voltPinParam"
+                  :auto-set="true"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row v-if="currPinParam" dense align="center">
+              <v-col cols="5" class="label-col">
+                <parameter-label label="Current Pin" :param="currPinParam" />
+              </v-col>
+              <v-col cols="7">
+                <inline-parameter-editor
+                  :param="currPinParam"
+                  :auto-set="true"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row v-if="voltMultParam" dense align="center">
+              <v-col cols="5" class="label-col">
+                <parameter-label label="Voltage Multiplier" :param="voltMultParam" />
+              </v-col>
+              <v-col cols="7" class="d-flex align-center">
+                <div class="flex-grow-1">
+                  <inline-parameter-editor
+                    :param="voltMultParam"
+                    :auto-set="true"
+                  />
+                </div>
+                <v-btn
+                  v-if="voltage != null"
+                  x-small
+                  color="primary"
+                  class="ml-2"
+                  @click="show_voltage_calc = true"
+                >
+                  Calculate
+                </v-btn>
+              </v-col>
+            </v-row>
+
+            <v-alert
+              v-if="voltMultParam"
+              type="info"
+              dense
+              text
+              class="my-1 caption"
+            >
+              If the reported voltage differs from a voltmeter reading, adjust the multiplier.
+            </v-alert>
+
+            <v-row v-if="ampPerVoltParam" dense align="center">
+              <v-col cols="5" class="label-col">
+                <parameter-label label="Amps per Volt" :param="ampPerVoltParam" />
+              </v-col>
+              <v-col cols="7" class="d-flex align-center">
+                <div class="flex-grow-1">
+                  <inline-parameter-editor
+                    :param="ampPerVoltParam"
+                    :auto-set="true"
+                  />
+                </div>
+                <v-btn
+                  v-if="voltage != null"
+                  x-small
+                  color="primary"
+                  class="ml-2"
+                  @click="show_current_calc = true"
+                >
+                  Calculate
+                </v-btn>
+              </v-col>
+            </v-row>
+
+            <v-row v-if="ampOffsetParam" dense align="center">
+              <v-col cols="5" class="label-col">
+                <parameter-label label="Amps Offset" :param="ampOffsetParam" />
+              </v-col>
+              <v-col cols="7">
+                <inline-parameter-editor
+                  :param="ampOffsetParam"
+                  :auto-set="true"
+                />
+              </v-col>
+            </v-row>
+
+            <v-alert
+              v-if="ampOffsetParam"
+              type="info"
+              dense
+              text
+              class="my-1 caption"
+            >
+              Adjust if the vehicle reports current draw when there is none flowing.
+            </v-alert>
+          </div>
+
+          <v-row v-if="capacityParam" dense align="center">
+            <v-col cols="5" class="label-col">
+              <parameter-label label="Battery Capacity" :param="capacityParam" />
+            </v-col>
+            <v-col cols="7">
+              <inline-parameter-editor
+                :param="capacityParam"
+                :auto-set="true"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row v-if="armVoltParam" dense align="center">
+            <v-col cols="5" class="label-col">
+              <parameter-label label="Min Arming Voltage" :param="armVoltParam" />
+            </v-col>
+            <v-col cols="7">
+              <inline-parameter-editor
+                :param="armVoltParam"
+                :auto-set="true"
+              />
+            </v-col>
+          </v-row>
+        </v-expand-transition>
+
+        <v-dialog v-model="show_voltage_calc" max-width="400">
+          <v-card class="pa-4">
+            <v-card-title class="subtitle-1 font-weight-bold">
+              Calculate Voltage Multiplier
+            </v-card-title>
+            <v-card-text>
+              <p class="body-2">
+                Measure battery voltage with an external voltmeter and enter it below.
+              </p>
+              <v-text-field
+                v-model.number="measured_voltage"
+                label="Measured Voltage (V)"
+                type="number"
+                step="0.01"
+                dense
+                hide-details
+                class="mb-3"
+              />
+              <div v-if="voltage != null" class="body-2 mb-1">
+                <b>Vehicle Voltage:</b> {{ voltage.toFixed(3) }} V
+              </div>
+              <div v-if="voltMultParam" class="body-2">
+                <b>Current Multiplier:</b> {{ voltMultParam.value }}
+              </div>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn text small @click="show_voltage_calc = false">
+                Cancel
+              </v-btn>
+              <v-btn
+                small
+                color="primary"
+                :disabled="!can_calculate_voltage"
+                @click="calculateVoltageMultiplier"
+              >
+                Calculate &amp; Set
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+
+        <v-dialog v-model="show_current_calc" max-width="400">
+          <v-card class="pa-4">
+            <v-card-title class="subtitle-1 font-weight-bold">
+              Calculate Amps per Volt
+            </v-card-title>
+            <v-card-text>
+              <p class="body-2">
+                Measure current draw with an external current meter and enter it below.
+              </p>
+              <v-text-field
+                v-model.number="measured_current"
+                label="Measured Current (A)"
+                type="number"
+                step="0.01"
+                dense
+                hide-details
+                class="mb-3"
+              />
+              <div v-if="current != null" class="body-2 mb-1">
+                <b>Vehicle Current:</b> {{ current.toFixed(3) }} A
+              </div>
+              <div v-if="ampPerVoltParam" class="body-2">
+                <b>Current Amps/Volt:</b> {{ ampPerVoltParam.value }}
+              </div>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn text small @click="show_current_calc = false">
+                Cancel
+              </v-btn>
+              <v-btn
+                small
+                color="primary"
+                :disabled="!can_calculate_current"
+                @click="calculateAmpsPerVolt"
+              >
+                Calculate &amp; Set
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </template>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+interface SensorPreset {
+  text: string
+  voltPin: number
+  currPin: number
+  voltMult: number
+  ampPerVolt: number
+  ampOffset: number
+}
+
+const SENSOR_PRESETS: SensorPreset[] = [
+  {
+    text: 'Power Module 90A',
+    voltPin: 2,
+    currPin: 3,
+    voltMult: 10.1,
+    ampPerVolt: 17.0,
+    ampOffset: 0,
+  },
+  {
+    text: 'Power Module HV',
+    voltPin: 2,
+    currPin: 3,
+    voltMult: 12.02,
+    ampPerVolt: 39.877,
+    ampOffset: 0,
+  },
+  {
+    text: '3DR Iris',
+    voltPin: 2,
+    currPin: 3,
+    voltMult: 12.02,
+    ampPerVolt: 17.0,
+    ampOffset: 0,
+  },
+  {
+    text: 'Blue Robotics Power Sense Module',
+    voltPin: 2,
+    currPin: 3,
+    voltMult: 11.000,
+    ampPerVolt: 37.8788,
+    ampOffset: 0.330,
+  },
+  {
+    text: 'Navigator w/ Blue Robotics Power Sense Module',
+    voltPin: 5,
+    currPin: 4,
+    voltMult: 11.000,
+    ampPerVolt: 37.8788,
+    ampOffset: 0.330,
+  },
+]
+
+export default Vue.extend({
+  name: 'BatteryCard',
+  components: {
+    'inline-parameter-editor': () => import('@/components/parameter-editor/InlineParameterEditor.vue'),
+    ParameterLabel: () => import('@/components/parameter-editor/ParameterLabel.vue'),
+  },
+  props: {
+    title: { type: String, required: true },
+    monitorParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    capacityParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    armVoltParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    voltPinParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    currPinParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    voltMultParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    ampPerVoltParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    ampOffsetParam: { type: Object as PropType<Parameter | undefined>, default: undefined },
+    voltage: { type: Number as PropType<number | undefined>, default: undefined },
+    current: { type: Number as PropType<number | undefined>, default: undefined },
+  },
+  data() {
+    return {
+      selected_sensor: null as string | null,
+      show_advanced: false,
+      show_voltage_calc: false,
+      show_current_calc: false,
+      measured_voltage: null as number | null,
+      measured_current: null as number | null,
+    }
+  },
+  computed: {
+    monitor_enabled(): boolean {
+      return this.monitorParam != null && this.monitorParam.value !== 0
+    },
+    sensor_options(): string[] {
+      return [...SENSOR_PRESETS.map((p) => p.text), 'Other']
+    },
+    can_calculate_voltage(): boolean {
+      return this.measured_voltage != null && this.measured_voltage > 0
+        && this.voltage != null && this.voltage !== 0
+    },
+    can_calculate_current(): boolean {
+      return this.measured_current != null && this.measured_current > 0
+        && this.current != null && this.current !== 0
+    },
+    sensor_fingerprint(): string {
+      return [
+        this.voltPinParam?.value,
+        this.currPinParam?.value,
+        this.voltMultParam?.value,
+        this.ampPerVoltParam?.value,
+        this.ampOffsetParam?.value,
+      ].join(',')
+    },
+  },
+  watch: {
+    monitor_enabled: {
+      immediate: true,
+      handler() {
+        if (this.monitor_enabled) {
+          this.detectCurrentSensor()
+        }
+      },
+    },
+    sensor_fingerprint() { this.detectCurrentSensor() },
+  },
+  methods: {
+    detectCurrentSensor() {
+      if (!this.voltPinParam || !this.currPinParam || !this.voltMultParam || !this.ampPerVoltParam) {
+        return
+      }
+      for (const preset of SENSOR_PRESETS) {
+        if (preset.voltPin === this.voltPinParam.value
+          && preset.currPin === this.currPinParam.value
+          && preset.voltMult === this.voltMultParam.value
+          && preset.ampPerVolt === this.ampPerVoltParam.value
+          && preset.ampOffset === (this.ampOffsetParam?.value ?? 0)) {
+          this.selected_sensor = preset.text
+          return
+        }
+      }
+      this.selected_sensor = 'Other'
+      this.show_advanced = true
+    },
+    applySensorPreset(selected: string) {
+      const preset = SENSOR_PRESETS.find((p) => p.text === selected)
+      if (!preset) return
+
+      const { system_id } = autopilot_data
+      if (this.voltPinParam) mavlink2rest.setParam(this.voltPinParam.name, preset.voltPin, system_id)
+      if (this.currPinParam) mavlink2rest.setParam(this.currPinParam.name, preset.currPin, system_id)
+      if (this.voltMultParam) mavlink2rest.setParam(this.voltMultParam.name, preset.voltMult, system_id)
+      if (this.ampPerVoltParam) mavlink2rest.setParam(this.ampPerVoltParam.name, preset.ampPerVolt, system_id)
+      if (this.ampOffsetParam) mavlink2rest.setParam(this.ampOffsetParam.name, preset.ampOffset, system_id)
+    },
+    calculateVoltageMultiplier() {
+      if (!this.can_calculate_voltage || !this.voltMultParam) return
+      const newMult = this.measured_voltage! * this.voltMultParam.value / this.voltage!
+      mavlink2rest.setParam(this.voltMultParam.name, newMult, autopilot_data.system_id)
+      this.show_voltage_calc = false
+      this.measured_voltage = null
+    },
+    calculateAmpsPerVolt() {
+      if (!this.can_calculate_current || !this.ampPerVoltParam) return
+      const newApv = this.measured_current! * this.ampPerVoltParam.value / this.current!
+      mavlink2rest.setParam(this.ampPerVoltParam.name, newApv, autopilot_data.system_id)
+      this.show_current_calc = false
+      this.measured_current = null
+    },
+  },
+})
+</script>
+
+<style scoped>
+.label-col {
+  text-align: right;
+  font-weight: 500;
+}
+</style>
+
+<style>
+.battery-card .v-text-field .v-label,
+.battery-card .v-select .v-label {
+  display: none;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/power/PowerConfiguration.vue b/core/frontend/src/components/vehiclesetup/configuration/power/PowerConfiguration.vue
new file mode 100644
index 0000000000..d3b6d44201
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/power/PowerConfiguration.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="params_finished_loaded" class="power-container pa-4">
+    <battery-card
+      title="Battery 1"
+      :monitor-param="parameter('BATT_MONITOR')"
+      :capacity-param="parameter('BATT_CAPACITY')"
+      :arm-volt-param="parameter('BATT_ARM_VOLT')"
+      :volt-pin-param="parameter('BATT_VOLT_PIN')"
+      :curr-pin-param="parameter('BATT_CURR_PIN')"
+      :volt-mult-param="parameter('BATT_VOLT_MULT')"
+      :amp-per-volt-param="parameter('BATT_AMP_PERVLT')"
+      :amp-offset-param="parameter('BATT_AMP_OFFSET')"
+      :voltage="battery_voltage"
+      :current="battery_current"
+    />
+    <battery-card
+      v-if="parameter('BATT2_MONITOR')"
+      title="Battery 2"
+      :monitor-param="parameter('BATT2_MONITOR')"
+      :capacity-param="parameter('BATT2_CAPACITY')"
+      :arm-volt-param="parameter('BATT2_ARM_VOLT')"
+      :volt-pin-param="parameter('BATT2_VOLT_PIN')"
+      :curr-pin-param="parameter('BATT2_CURR_PIN')"
+      :volt-mult-param="parameter('BATT2_VOLT_MULT')"
+      :amp-per-volt-param="parameter('BATT2_AMP_PERVLT')"
+      :amp-offset-param="parameter('BATT2_AMP_OFFSET')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot_data from '@/store/autopilot'
+import mavlink from '@/store/mavlink'
+import Parameter from '@/types/autopilot/parameter'
+import mavlink_store_get from '@/utils/mavlink'
+
+import BatteryCard from './BatteryCard.vue'
+
+export default Vue.extend({
+  name: 'PowerConfiguration',
+  components: {
+    BatteryCard,
+  },
+  computed: {
+    params_finished_loaded(): boolean {
+      return autopilot_data.finished_loading
+    },
+    battery_voltage(): number {
+      const voltage_microvolts = mavlink_store_get(mavlink, 'SYS_STATUS.messageData.message.voltage_battery') as number
+      return voltage_microvolts / 1000
+    },
+    battery_current(): number {
+      const current_centiampere = mavlink_store_get(mavlink, 'SYS_STATUS.messageData.message.current_battery') as number
+      return current_centiampere / 100
+    },
+  },
+  methods: {
+    parameter(name: string): Parameter | undefined {
+      return autopilot_data.parameter(name)
+    },
+  },
+})
+</script>
+
+<style scoped>
+.power-container {
+  max-width: 700px;
+  margin: 0 auto;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/overview/BaroCalib.vue b/core/frontend/src/components/vehiclesetup/overview/BaroCalib.vue
index 761a64b6c4..3d90b5da26 100644
--- a/core/frontend/src/components/vehiclesetup/overview/BaroCalib.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/BaroCalib.vue
@@ -31,7 +31,7 @@
             </thead>
             <tbody>
               <tr
-                v-for="baro in baros"
+                v-for="baro in ardupilot_sensors.baros"
                 :key="baro.param"
               >
                 <td><b>{{ baro.deviceName ?? 'UNKNOWN' }}</b></td>
@@ -67,12 +67,13 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import ardupilot_sensors, { ArdupilotSensorsStore } from '@/store/ardupilot_sensors'
 import autopilot_data from '@/store/autopilot'
 import autopilot from '@/store/autopilot_manager'
 import mavlink from '@/store/mavlink'
 import { printParam } from '@/types/autopilot/parameter'
 import { Dictionary } from '@/types/common'
-import decode, { BUS_TYPE, deviceId } from '@/utils/deviceid_decoder'
+import { BUS_TYPE } from '@/utils/deviceid_decoder'
 import mavlink_store_get from '@/utils/mavlink'
 
 import { calibrator, PreflightCalibration } from '../calibration'
@@ -86,14 +87,9 @@ export default Vue.extend({
     }
   },
   computed: {
-    baros(): deviceId[] {
-      return autopilot_data.parameterRegex('^BARO.*_DEVID')
-        .filter((param) => param.value !== 0)
-        .map((parameter) => decode(parameter.name, parameter.value))
-    },
     baro_status(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const baro of this.baros) {
+      for (const baro of ardupilot_sensors.baros) {
         const radix = baro.param.replace('_DEVID', '')
         const number = parseInt(radix.replace('BARO', ''), 10)
         const msg = number === 1 ? 'SCALED_PRESSURE' : `SCALED_PRESSURE${number}`
@@ -104,7 +100,7 @@ export default Vue.extend({
     },
     baro_ground_pressure(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const baro of this.baros) {
+      for (const baro of ardupilot_sensors.baros) {
         const radix = baro.param.replace('_DEVID', '')
         const calibrated_param = autopilot_data.parameter(`${radix}_GND_PRESS`)
         const pretty_value = (printParam(calibrated_param) / 100).toFixed(2)
@@ -117,10 +113,10 @@ export default Vue.extend({
     },
     get_pressure_type(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const baro of this.baros) {
+      for (const baro of ardupilot_sensors.baros) {
         // BARO_SPEC_GRAV Only exist for underwater vehicles
         const spec_gravity_param = autopilot_data.parameter('BARO_SPEC_GRAV')
-        const water = ['MS5837', 'MS5611', 'KELLERLD'].includes(baro.deviceName ?? '--')
+        const water = ['MS5837_30BA', 'MS5837_02BA', 'MS5611', 'KELLERLD'].includes(baro.deviceName ?? '--')
         && autopilot.vehicle_type === 'Submarine' && baro.busType === BUS_TYPE.I2C
         && baro.bus === this.external_i2c_bus
         if (water) {
@@ -131,6 +127,14 @@ export default Vue.extend({
       }
       return results
     },
+    ardupilot_sensors(): ArdupilotSensorsStore {
+      return ardupilot_sensors
+    },
+  },
+  mounted() {
+    mavlink.setMessageRefreshRate({ messageName: 'SCALED_PRESSURE$', refreshRate: 1 })
+    mavlink.setMessageRefreshRate({ messageName: 'SCALED_PRESSURE2$', refreshRate: 1 })
+    mavlink.setMessageRefreshRate({ messageName: 'SCALED_PRESSURE3$', refreshRate: 1 })
   },
   methods: {
     bus_name(bus: number): string {
diff --git a/core/frontend/src/components/vehiclesetup/overview/GyroCalib.vue b/core/frontend/src/components/vehiclesetup/overview/GyroCalib.vue
index 15312dd0db..48ba2d8563 100644
--- a/core/frontend/src/components/vehiclesetup/overview/GyroCalib.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/GyroCalib.vue
@@ -37,7 +37,7 @@
           <inline-parameter-editor
             v-if="ins_gyr_cal"
             :param="ins_gyr_cal"
-            :label="'Calibrate gyroscopes automaicallly'"
+            :label="'Calibrate gyroscopes automatically'"
           />
         </div>
       </v-card-text>
@@ -93,14 +93,14 @@ export default Vue.extend({
         const suffix = index === 1 ? '' : index.toString()
         const gyrId = autopilot_data.parameter(`INS_GYR${suffix}_ID`)
         const offsets = ['X', 'Y', 'Z'].map((axis) => {
-          const rawValue = autopilot_data.parameter(`INS_GYROFFS${suffix}_${axis}`)?.value
+          const rawValue = autopilot_data.parameter(`INS_GYR${suffix}OFFS_${axis}`)?.value
           return rawValue ? rawValue * 1000 : null
         }) as [number, number, number]
 
         return {
           name: gyrId ? decode(gyrId.name, gyrId.value).deviceName ?? '?' : '?',
           param: gyrId,
-          value: this[`gyro_read${index}`],
+          value: [this.gyro_read1, this.gyro_read2, this.gyro_read3][index],
           offsets: vec3.fromValues(...offsets),
           calibration_temperature: autopilot_data.parameter(`INS_GYR${index}_CALTEMP`)?.value ?? 0,
         }
diff --git a/core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue b/core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue
index 3c285db0e0..c2705f1fc1 100755
--- a/core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Leak
     </v-card-title>
@@ -57,5 +57,3 @@ export default Vue.extend({
   },
 })
 </script>
-<style>
-</style>
diff --git a/core/frontend/src/components/vehiclesetup/overview/LightsInfo.vue b/core/frontend/src/components/vehiclesetup/overview/LightsInfo.vue
index b7cc679013..276a643b2a 100755
--- a/core/frontend/src/components/vehiclesetup/overview/LightsInfo.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/LightsInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Lights
     </v-card-title>
diff --git a/core/frontend/src/components/vehiclesetup/overview/OnboardSensors.vue b/core/frontend/src/components/vehiclesetup/overview/OnboardSensors.vue
index 85eb80cfe8..5a59789c41 100755
--- a/core/frontend/src/components/vehiclesetup/overview/OnboardSensors.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/OnboardSensors.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2">
+  <v-card class="mt-6">
     <v-card-title class="align-center">
       Autopilot Sensors
     </v-card-title>
@@ -27,18 +27,18 @@
           </thead>
           <tbody>
             <tr
-              v-for="imu in imus"
-              :key="imu.param"
+              v-for="accelerometer in ardupilot_sensors.accelerometers"
+              :key="accelerometer.param"
             >
-              <td><b>{{ imu.deviceName ?? 'UNKNOWN' }}</b></td>
+              <td><b>{{ accelerometer.deviceName ?? 'UNKNOWN' }}</b></td>
               <td v-tooltip="'Inertial Navigation Sensor'">
                 INS
               </td>
-              <td>{{ print_bus(imu.busType) }} {{ imu.bus }}</td>
-              <td>{{ `0x${imu.address}` }}</td>
+              <td>{{ print_bus(accelerometer.busType) }} {{ accelerometer.bus }}</td>
+              <td>{{ `0x${accelerometer.address}` }}</td>
               <td>
                 <v-icon
-                  v-if="imu_is_calibrated[imu.param]"
+                  v-if="ardupilot_sensors.accelerometers_calibrated[accelerometer.param]"
                   v-tooltip="'Sensor is callibrated and good to use'"
                   color="green"
                 >
@@ -52,7 +52,7 @@
                   mdi-emoticon-sad-outline
                 </v-icon>
                 <v-icon
-                  v-if="imu_temperature_is_calibrated[imu.param].calibrated"
+                  v-if="ardupilot_sensors.accelerometers_temperature_calibrated[accelerometer.param].calibrated"
                   v-tooltip="'Sensor thermometer is calibrated and good to use'"
                   color="green"
                 >
@@ -68,7 +68,7 @@
               </td>
             </tr>
             <tr
-              v-for="compass in compasses"
+              v-for="compass in ardupilot_sensors.compasses"
               :key="compass.param"
             >
               <td><b>{{ compass.deviceName ?? 'UNKNOWN' }}</b></td>
@@ -79,7 +79,7 @@
               <td>{{ `0x${compass.address}` }}</td>
               <td>
                 <v-icon
-                  v-if="compass_is_calibrated[compass.param]"
+                  v-if="ardupilot_sensors.compass_calibrated[compass.param]"
                   v-tooltip="'Sensor is callibrated and good to use'"
                   color="green"
                 >
@@ -95,7 +95,7 @@
               </td>
             </tr>
             <tr
-              v-for="baro in baros"
+              v-for="baro in ardupilot_sensors.baros"
               :key="baro.param"
             >
               <td><b>{{ baro.deviceName ?? 'UNKNOWN' }}</b></td>
@@ -128,34 +128,18 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import ardupilot_sensors, { ArdupilotSensorsStore } from '@/store/ardupilot_sensors'
 import autopilot_data from '@/store/autopilot'
 import autopilot from '@/store/autopilot_manager'
 import mavlink from '@/store/mavlink'
 import { printParam } from '@/types/autopilot/parameter'
 import { Dictionary } from '@/types/common'
-import decode, { BUS_TYPE, deviceId } from '@/utils/deviceid_decoder'
+import { BUS_TYPE, deviceId } from '@/utils/deviceid_decoder'
 import mavlink_store_get from '@/utils/mavlink'
 
-import { imu_is_calibrated, imu_temperature_is_calibrated } from '../configuration/common'
-
 export default Vue.extend({
   name: 'OnboardSensors',
   computed: {
-    imus() : deviceId[] {
-      return autopilot_data.parameterRegex('^INS_ACC.*_ID')
-        .filter((param) => param.value !== 0)
-        .map((parameter) => decode(parameter.name, parameter.value))
-    },
-    compasses(): deviceId[] {
-      return autopilot_data.parameterRegex('^COMPASS_DEV_ID.*')
-        .filter((param) => param.value !== 0)
-        .map((parameter) => decode(parameter.name, parameter.value))
-    },
-    baros(): deviceId[] {
-      return autopilot_data.parameterRegex('^BARO.*_DEVID')
-        .filter((param) => param.value !== 0)
-        .map((parameter) => decode(parameter.name, parameter.value))
-    },
     // DEV_ID params do not exist yet for temperature sensors, so here we detect the incoming message instead
     celsius_temperature(): number | undefined {
       return mavlink_store_get(mavlink, 'SCALED_PRESSURE3.messageData.message.temperature') as number / 100.0
@@ -179,7 +163,7 @@ export default Vue.extend({
     },
     compass_description(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const compass of this.compasses) {
+      for (const compass of ardupilot_sensors.compasses) {
         // First we check the priority for this device
         let priority = 'Unused'
         let number_in_parameter = 0
@@ -211,51 +195,16 @@ export default Vue.extend({
       }
       return results
     },
-    compass_is_calibrated(): Dictionary<boolean> {
-      const results = {} as Dictionary<boolean>
-      for (const compass of this.compasses) {
-        const compass_number = compass.param.split('COMPASS_DEV_ID')[1]
-        const offset_params_names = [
-          `COMPASS_OFS${compass_number}_X`,
-          `COMPASS_OFS${compass_number}_Y`,
-          `COMPASS_OFS${compass_number}_Z`,
-        ]
-        const diagonal_params_names = [
-          `COMPASS_ODI${compass_number}_X`,
-          `COMPASS_ODI${compass_number}_Y`,
-          `COMPASS_ODI${compass_number}_Z`,
-        ]
-
-        const offset_params = offset_params_names.map(
-          (name) => autopilot_data.parameter(name),
-        )
-        const diagonal_params = diagonal_params_names.map(
-          (name) => autopilot_data.parameter(name),
-        )
-        if (offset_params.includes(undefined) || diagonal_params.includes(undefined)) {
-          results[compass.param] = false
-          continue
-        }
-        const is_at_default_offsets = offset_params.every((param) => param?.value === 0.0)
-        const is_at_default_diagonals = diagonal_params.every((param) => param?.value === 0.0)
-        results[compass.param] = !offset_params.isEmpty() && !diagonal_params.isEmpty()
-          && (!is_at_default_offsets || !is_at_default_diagonals)
-      }
-      return results
-    },
-    imu_is_calibrated(): Dictionary<boolean> {
-      return imu_is_calibrated(this.imus, autopilot_data)
-    },
-    imu_temperature_is_calibrated(): Dictionary<{ calibrated: boolean, calibrationTemperature: number }> {
-      return imu_temperature_is_calibrated(this.imus, autopilot_data)
+    ardupilot_sensors(): ArdupilotSensorsStore {
+      return ardupilot_sensors
     },
     external_i2c_bus(): number | undefined {
       return autopilot_data.parameter('BARO_EXT_BUS')?.value
     },
     is_water_baro(): Dictionary<boolean> {
       const results = {} as Dictionary<boolean>
-      for (const baro of this.baros) {
-        if (['MS5837', 'MS5611', 'KELLERLD'].includes(baro.deviceName ?? '--')
+      for (const baro of ardupilot_sensors.baros) {
+        if (['MS5837_30BA', 'MS5837_02BA', 'MS5611', 'KELLERLD'].includes(baro.deviceName ?? '--')
         && autopilot.vehicle_type === 'Submarine' && baro.busType === BUS_TYPE.I2C
         && baro.bus === this.external_i2c_bus) {
           results[baro.param] = true
@@ -267,7 +216,7 @@ export default Vue.extend({
     },
     baro_status(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const baro of this.baros) {
+      for (const baro of ardupilot_sensors.baros) {
         const radix = baro.param.replace('_DEVID', '')
         const number = parseInt(radix.replace('BARO', ''), 10)
         if (this.is_water_baro[baro.param]) {
@@ -282,7 +231,7 @@ export default Vue.extend({
     },
     get_pressure_type(): Dictionary<string> {
       const results = {} as Dictionary<string>
-      for (const barometer of this.baros) {
+      for (const barometer of ardupilot_sensors.baros) {
         if (!this.is_water_baro[barometer.param]) {
           results[barometer.param] = 'Barometric'
         } else {
diff --git a/core/frontend/src/components/vehiclesetup/overview/ParamSets.vue b/core/frontend/src/components/vehiclesetup/overview/ParamSets.vue
index 85b337080d..e91c23d1ec 100644
--- a/core/frontend/src/components/vehiclesetup/overview/ParamSets.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/ParamSets.vue
@@ -1,6 +1,9 @@
 <template>
   <v-row class="main-container">
-    <v-card class="card-container">
+    <v-card
+      v-if="settings.is_pirate_mode"
+      class="card-container"
+    >
       <v-card-title class="align-center">
         Reset Parameters to Firmware Defaults
       </v-card-title>
@@ -11,7 +14,7 @@
         </p>
       </v-card-text>
       <v-card-actions>
-        <v-btn :disabled="wipe_successful" :loading="erasing" color="primary" @click="wipe">
+        <v-btn :disabled="wipe_successful" :loading="erasing" color="primary" @click="show_warning = true">
           Reset All Parameters
         </v-btn>
         <v-btn
@@ -31,11 +34,6 @@
           Parameters reset <b>successful</b>. <span v-if="!done"> Please reboot the vehicle to apply changes. </span>
         </v-alert>
       </v-card-actions>
-      <ParameterLoader
-        v-if="selected_paramset"
-        :parameters="selected_paramset"
-        @done="selected_paramset = {}"
-      />
     </v-card>
     <v-card class="card-container">
       <v-card-title class="align-center">
@@ -58,13 +56,20 @@
         <p v-if="(Object.keys(filtered_param_sets).length === 0)">
           No parameters available for this setup
         </p>
-        <ParameterLoader
-          v-if="selected_paramset"
-          :parameters="selected_paramset"
-          @done="selected_paramset = {}"
-        />
       </v-card-actions>
     </v-card>
+    <ParameterLoader
+      v-if="selected_paramset"
+      :parameters="selected_paramset"
+      @done="selected_paramset = {}"
+    />
+
+    <WarningDialog
+      v-model="show_warning"
+      :message="warningMessage"
+      confirm-label="Yes, reset them"
+      @confirm="wipe"
+    />
   </v-row>
 </template>
 
@@ -73,12 +78,15 @@ import { SemVer } from 'semver'
 import Vue from 'vue'
 
 import * as AutopilotManager from '@/components/autopilot/AutopilotManagerUpdater'
+import { fetchCurrentBoard } from '@/components/autopilot/AutopilotManagerUpdater'
+import WarningDialog from '@/components/common/WarningDialog.vue'
 import ParameterLoader from '@/components/parameter-editor/ParameterLoader.vue'
 import mavlink2rest from '@/libs/MAVLink2Rest'
 import {
   MavCmd, MavResult,
 } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
 import Notifier from '@/libs/notifier'
+import settings from '@/libs/settings'
 import autopilot_data from '@/store/autopilot'
 import autopilot from '@/store/autopilot_manager'
 import { Dictionary } from '@/types/common'
@@ -91,6 +99,7 @@ export default Vue.extend({
   name: 'ParamSets',
   components: {
     ParameterLoader,
+    WarningDialog,
   },
   data: () => ({
     all_param_sets: {} as Dictionary<Dictionary<number>>,
@@ -100,6 +109,8 @@ export default Vue.extend({
     rebooting: false,
     done: false,
     erasing: false,
+    settings,
+    show_warning: false,
   }),
   computed: {
     board(): string | undefined {
@@ -136,8 +147,12 @@ export default Vue.extend({
         ...fw_params,
       }
     },
+    warningMessage(): string {
+      return 'You will lose ALL your parameters, vehicle setup, and calibrations. Are you sure you want to reset?'
+    },
   },
   mounted() {
+    fetchCurrentBoard()
     this.loadParamSets()
   },
   methods: {
@@ -178,6 +193,7 @@ export default Vue.extend({
         notifier.pushError('PARAM_RESET_FAIL', `Parameters Reset failed: ${e}`, true)
       } finally {
         this.erasing = false
+        this.show_warning = false
       }
     },
 
diff --git a/core/frontend/src/components/vehiclesetup/overview/PingInfo.vue b/core/frontend/src/components/vehiclesetup/overview/PingInfo.vue
index 9168227041..5e673a0fef 100755
--- a/core/frontend/src/components/vehiclesetup/overview/PingInfo.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/PingInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2 pinginfo">
+  <v-card class="pa-2">
     <v-card-title class="justify-center">
       Ping Sensors
     </v-card-title>
@@ -56,7 +56,4 @@ i.ping360 {
     transform: rotate(180deg);
     margin: 15px;
 }
-.pinginfo {
-  width: fit-content;
-}
 </style>
diff --git a/core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue b/core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue
index 62158b2edb..8a80a58119 100755
--- a/core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Battery Monitor
     </v-card-title>
@@ -148,5 +148,3 @@ export default Vue.extend({
   },
 })
 </script>
-<style>
-</style>
diff --git a/core/frontend/src/components/vehiclesetup/overview/VehicleInfo.vue b/core/frontend/src/components/vehiclesetup/overview/VehicleInfo.vue
index d5be5eefc2..fd7bd2e5c8 100755
--- a/core/frontend/src/components/vehiclesetup/overview/VehicleInfo.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/VehicleInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2">
+  <v-card>
     <v-card-title class="align-center">
       Vehicle
     </v-card-title>
diff --git a/core/frontend/src/components/vehiclesetup/overview/VideoOverview.vue b/core/frontend/src/components/vehiclesetup/overview/VideoOverview.vue
index 89ac19c2ba..b44c6cd006 100755
--- a/core/frontend/src/components/vehiclesetup/overview/VideoOverview.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/VideoOverview.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Video
     </v-card-title>
diff --git a/core/frontend/src/components/vehiclesetup/overview/gripper.vue b/core/frontend/src/components/vehiclesetup/overview/gripper.vue
index 91798af7f2..63e72cd0d3 100644
--- a/core/frontend/src/components/vehiclesetup/overview/gripper.vue
+++ b/core/frontend/src/components/vehiclesetup/overview/gripper.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Gripper
     </v-card-title>
diff --git a/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue b/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
index 7b26aeaf5b..36c5dec24f 100755
--- a/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
+++ b/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
@@ -1,14 +1,18 @@
 <template>
   <div>
     <model-viewer
-      v-if="model_path"
+      v-if="model_viewer_supported && model_viewer_ready && computed_model_path"
       id="modelviewer"
       ref="modelviewer"
-      :src="model_override_path || model_path"
+      :src="model_override_path || computed_model_path"
       :auto-rotate="autorotate"
-      camera-controls
+      :camera-controls="cameracontrols"
+      :orientation="orientation"
       shadow-intensity="0.3"
       interaction-prompt="none"
+      :camera-orbit="cameraOrbit"
+      camera-target="auto 0m auto"
+      @load="onModelViewerLoad"
     >
       <button
         v-for="annotation in filtered_annotations"
@@ -45,31 +49,51 @@
         </v-icon>
       </v-btn>
     </model-viewer>
+    <div
+      v-else-if="!model_viewer_supported"
+      class="d-flex flex-column align-center text-center pa-4"
+    >
+      <v-icon
+        style="height: 170px"
+        size="200"
+        v-text="'mdi-cube-off-outline'"
+      />
+      <p class="text-h6 ma-2">
+        3D viewer unavailable
+      </p>
+      <p class="text-body-2" style="max-width: 350px">
+        This browser does not support the required WebGL features.
+      </p>
+    </div>
+    <div v-else-if="!show_model_not_found" class="d-flex flex-column align-center">
+      <SpinningLogo size="30%" />
+    </div>
     <div v-else class="d-flex flex-column align-center">
-      <SpinningLogo v-if="!model_path" size="40%" />
-      <div v-else>
-        <v-icon
-          style="height: 400px"
-          size="256"
-          v-text="'mdi-sail-boat-sink'"
-        />
-        <div
-          class="text-h6"
-          :v-text="'Vehicle not found.'"
-        />
-        <p class="text-h6 text-center ma-4">
-          Vehicle not found
-        </p>
-      </div>
+      <v-icon
+        style="height: 170px"
+        size="200"
+        v-text="'mdi-sail-boat-sink'"
+      />
+      <p class="text-h6 ma-2">
+        Vehicle model not found
+      </p>
+      <p class="text-center text-body-2" style="max-width: 350px">
+        If you want to add a custom 3D model please follow the instructions in
+        <a
+          href="https://blueos.cloud/docs/latest/usage/advanced/#vehicle-model"
+          target="_blank"
+          class="text-decoration-none"
+        >
+          BlueOS Documentation
+        </a>
+      </p>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import '@google/model-viewer/dist/model-viewer'
-
-import { ModelViewerElement } from '@google/model-viewer/lib/model-viewer'
-import { HotspotConfiguration } from '@google/model-viewer/lib/three-components/Hotspot'
+import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer'
+import type { HotspotConfiguration } from '@google/model-viewer/lib/three-components/Hotspot'
 import axios from 'axios'
 import { saveAs } from 'file-saver'
 import Image from 'image-js'
@@ -77,34 +101,35 @@ import Vue from 'vue'
 
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
 import autopilot_data from '@/store/autopilot'
-import autopilot from '@/store/autopilot_manager'
 import ping from '@/store/ping'
-import {
-  FRAME_TYPE as ROVER_FRAME_TYPE,
-} from '@/types/autopilot/parameter-rover-enums'
 import {
   BTN_FUNCTION as SUB_BTN_FUNCTION,
-  FRAME_CONFIG as SUB_FRAME_CONFIG,
   SERVO_FUNCTION as SUB_SERVO_FUNCTION,
 } from '@/types/autopilot/parameter-sub-enums'
 import { Dictionary, Indexed, Keyed } from '@/types/common'
 import { PingType } from '@/types/ping'
-import { sleep } from '@/utils/helper_functions'
+import { canUseModelViewer, ensureModelViewer } from '@/utils/model_viewer_support'
 
-const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+import { checkModelOverrides, frame_name, vehicle_folder } from './modelHelper'
 
-function get_model(vehicle_name: string, frame_name: string): undefined | string {
-  const release_path = `assets/vehicles/models/${vehicle_name}/${frame_name}.glb`
-  if (models[`/public/${release_path}`]) {
-    return `/assets/vehicles/models/${vehicle_name}/${frame_name}.glb`
-  }
-  return undefined
-}
+const MODEL_VIEWER_SUPPORTED = canUseModelViewer()
+
+const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
 
 export default Vue.extend({
   name: 'GenericViewer',
   components: { SpinningLogo },
   props: {
+    cameracontrols: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    orientation: {
+      type: String,
+      required: false,
+      default: '0deg 0deg 0deg',
+    },
     transparent: {
       type: Boolean,
       required: false,
@@ -113,7 +138,7 @@ export default Vue.extend({
     highlight: {
       type: Array<string>,
       required: false,
-      default: [],
+      default: () => [],
     },
     autorotate: {
       type: Boolean,
@@ -124,6 +149,16 @@ export default Vue.extend({
       required: false,
       default: false,
     },
+    modelpath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    cameraOrbit: {
+      type: String,
+      required: false,
+      default: '45deg 70deg 0deg',
+    },
   },
   data() {
     return {
@@ -131,63 +166,23 @@ export default Vue.extend({
       annotations: {} as Dictionary<HotspotConfiguration>,
       override_annotations: {} as Dictionary<HotspotConfiguration>,
       default_alphas: {} as Dictionary<number>,
+      show_model_not_found: false,
+      model_viewer_supported: MODEL_VIEWER_SUPPORTED,
+      model_viewer_ready: false,
     }
   },
   computed: {
-    vehicle_type(): string | null {
-      return autopilot.vehicle_type
-    },
-    vehicle_folder(): string {
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          return 'sub'
-        case 'Surface Boat':
-          return 'boat'
-        case 'Ground Rover':
-          return 'rover'
-        default:
-          return ''
-      }
-    },
-    frame_type(): number | undefined {
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          return autopilot_data.parameter('FRAME_CONFIG')?.value
-        case 'Surface Boat':
-          return autopilot_data.parameter('FRAME_TYPE')?.value
-          // TODO: other vehicles
-        default:
-          return undefined
-      }
-    },
-    frame_name(): string | undefined {
-      let result
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          result = Object.entries(SUB_FRAME_CONFIG).find((key, value) => value === this.frame_type)?.[1] as string
-          break
-        case 'Surface Boat':
-          // we already know it is a boat, so check only TYPE and ignore CLASS (rover/boat/balancebot)
-          result = Object.entries(ROVER_FRAME_TYPE).find((key, value) => value === this.frame_type)?.[1] as string
-          break
-        case 'Ground Rover':
-          // TOOD: check FRAME_TYPE
-          result = 'unknown'
-          break
-          // TODO: other vehicles
-        default:
-          break
+    computed_model_path(): string | undefined {
+      if (this.modelpath) {
+        return this.modelpath
       }
-      return result ? `${result}` : undefined
-    },
-    model_path(): string | undefined {
-      return get_model(this.vehicle_folder, this.frame_name)
+      return autopilot_data.vehicle_model
     },
     filtered_annotations(): (HotspotConfiguration & Indexed & Keyed)[] {
       if (this.noannotations) {
         return []
       }
-      if (this.frame_name === undefined) {
+      if (frame_name === undefined) {
         return []
       }
       // pick correct set
@@ -258,21 +253,14 @@ export default Vue.extend({
         this.forceRefreshAnnotations()
         return
       }
-      if (this.transparent) {
-        this.setAlphas(0.05)
-        for (const part of this.highlight) {
-          this.makeOpaque(part)
-        }
-      } else {
-        this.setAlphas(1)
-      }
+      this.redraw()
       this.hideIrrelevantParts()
       this.forceRefreshAnnotations()
     },
-    async model_path() {
+    async computed_model_path() {
       this.reloadAnnotations()
-      this.model_override_path = await this.checkModelOverrides()
-      this.override_annotations = await this.loadAnottationsOverride()
+      this.model_override_path = await checkModelOverrides()
+      this.override_annotations = await this.loadAnnotationsOverride()
       this.forceRefreshAnnotations()
     },
     frame_type() {
@@ -295,24 +283,26 @@ export default Vue.extend({
     },
   },
   async mounted() {
-    // eslint-disable-next-line no-extra-parens
-    (this.$refs.modelviewer as ModelViewerElement)?.addEventListener('load', () => {
-      this.redraw()
-      if (this.transparent) {
-        this.setAlphas(0.05)
-        for (const part of this.highlight) {
-          this.makeOpaque(part)
-        }
-      } else {
-        this.setAlphas(1)
+    if (this.model_viewer_supported) {
+      const loaded = await ensureModelViewer()
+      this.model_viewer_ready = loaded
+      this.model_viewer_supported = loaded
+    }
+    setTimeout(() => {
+      if (!this.computed_model_path) {
+        this.show_model_not_found = true
       }
-      this.hideIrrelevantParts()
-    })
-    this.model_override_path = await this.checkModelOverrides()
-    this.override_annotations = await this.loadAnottationsOverride()
+    }, 5000)
+
+    this.model_override_path = await checkModelOverrides()
+    this.override_annotations = await this.loadAnnotationsOverride()
     this.reloadAnnotations()
   },
   methods: {
+    onModelViewerLoad() {
+      this.redraw()
+      this.hideIrrelevantParts()
+    },
     async download() {
       const viewer = this.$refs.modelviewer as ModelViewerElement
       const mimeType = 'image/png'
@@ -350,37 +340,26 @@ export default Vue.extend({
       saveAs(file)
     },
     async reloadAnnotations() {
-      const json = await models[`./${this.vehicle_folder}/${this.frame_name}.json`]
+      const path = `/public/assets/vehicles/models/${vehicle_folder()}/${frame_name()}.json`
+      const json = await models[path]
       if (json) {
         this.annotations = json.annotations ?? {}
       }
     },
     redraw() {
-      this.setAlphas(1)
+      if (this.transparent) {
+        this.setAlphas(0.05)
+        for (const part of this.highlight) {
+          this.makeOpaque(part)
+        }
+      } else {
+        this.setAlphas(1)
+      }
       this.hideIrrelevantParts()
       this.forceRefreshAnnotations()
     },
-    async checkModelOverrides() {
-      while (!this.vehicle_type || !this.frame_name) {
-        await sleep(100)
-      }
-      const master_override = '/userdata/modeloverrides/ALL.glb'
-      const vehicle_override = `/userdata/modeloverrides/${this.vehicle_folder}/${this.frame_name}.glb`
-      try {
-        await axios.head(master_override)
-        return master_override
-      } catch {
-        console.log(`master override model not found at ${master_override}`)
-      }
-      try {
-        await axios.head(vehicle_override)
-        return vehicle_override
-      } catch {
-        console.log(`vehicle override model not found at ${vehicle_override}`)
-      }
-      return undefined
-    },
-    async loadAnottationsOverride(): Promise<Dictionary<HotspotConfiguration>> {
+
+    async loadAnnotationsOverride(): Promise<Dictionary<HotspotConfiguration>> {
       if (!this.model_override_path) {
         return {}
       }
@@ -458,13 +437,13 @@ export default Vue.extend({
 
 <style scoped>
 model-viewer {
-  min-height: 500px;
+  height: 100%;
   width: 100%;
 }
 .HotspotAnnotation {
     background: rgb(255, 255, 255);
     border-radius: 4px;
-    box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
+    box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
     color: rgba(0, 0, 0, 0.8);
     display: block;
     font-family: Futura, "Helvetica Neue", sans-serif;
@@ -489,8 +468,8 @@ model-viewer {
 .Hotspot {
     background: rgb(255, 255, 255);
     border-radius: 32px;
-    border: 0px;
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px;
+    border: 0;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
     box-sizing: border-box;
     cursor: pointer;
     height: 24px;
diff --git a/core/frontend/src/components/vehiclesetup/viewers/VehicleViewer.vue b/core/frontend/src/components/vehiclesetup/viewers/VehicleViewer.vue
index 176b507237..204935ab48 100644
--- a/core/frontend/src/components/vehiclesetup/viewers/VehicleViewer.vue
+++ b/core/frontend/src/components/vehiclesetup/viewers/VehicleViewer.vue
@@ -4,6 +4,9 @@
     :noannotations="noannotations"
     :autorotate="autorotate"
     :transparent="transparent"
+    :modelpath="modelpath"
+    :style="{ height: '200px' }"
+    :zoom="zoom"
   />
 </template>
 
@@ -37,6 +40,16 @@ export default Vue.extend({
       required: false,
       default: false,
     },
+    modelpath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    zoom: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
   },
 })
 </script>
diff --git a/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts b/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts
new file mode 100644
index 0000000000..ac7794ec48
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts
@@ -0,0 +1,96 @@
+import { MavType } from "@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum"
+import autopilot_data from "@/store/autopilot"
+import autopilot from "@/store/autopilot_manager"
+
+import {
+    FRAME_CLASS as ROVER_FRAME_CLASS,
+    FRAME_TYPE as ROVER_FRAME_TYPE,
+  } from '@/types/autopilot/parameter-rover-enums'
+
+import {
+    FRAME_CONFIG as SUB_FRAME_CONFIG,
+  } from '@/types/autopilot/parameter-sub-enums'
+import { sleep } from "@/utils/helper_functions"
+import axios from "axios"
+
+const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+
+export function vehicle_folder(): string {
+  const mav_type = 'MAV_TYPE_' + autopilot.vehicle_type?.toUpperCase().replace(' ', '_')
+  switch (mav_type) {
+    case MavType.MAV_TYPE_SUBMARINE:
+      return 'sub'
+    case MavType.MAV_TYPE_SURFACE_BOAT:
+    case MavType.MAV_TYPE_GROUND_ROVER:
+      return 'rover'
+    default:
+      return autopilot.vehicle_type?.toLowerCase() || 'unknown'
+  }
+}
+
+export enum BoardName {
+    NAVIGATOR = 'NAVIGATOR',
+    GENERIC = 'GENERIC',
+}
+
+
+export function frame_type(): number | undefined {
+    const mav_type = 'MAV_TYPE_' + autopilot.vehicle_type?.toUpperCase()
+    switch (mav_type) {
+      case MavType.MAV_TYPE_SUBMARINE:
+        return autopilot_data.parameter('FRAME_CONFIG')?.value
+      case MavType.MAV_TYPE_SURFACE_BOAT:
+        return autopilot_data.parameter('FRAME_TYPE')?.value
+        // TODO: other vehicles
+      default:
+        return undefined
+    }
+  }
+
+
+export function frame_name(vehicle_type: string, frame_type?: number, frame_subtype?: number): string | undefined {
+    switch (vehicle_type) {
+      case 'Submarine':
+        return Object.entries(SUB_FRAME_CONFIG).find((key, value) => value === frame_type)?.[1] as string
+      case 'Surface Boat':
+      case 'Ground Rover':
+        // we already know it is a boat, so check only TYPE and ignore CLASS (rover/boat/balancebot)
+        return Object.entries(ROVER_FRAME_CLASS).find((key, value) => value === frame_type)?.[1] as string
+     default:
+        break
+    }
+    return undefined
+  }
+
+export async function checkModelOverrides() {
+    // Early return on global override
+    const master_override = '/userdata/modeloverrides/ALL.glb'
+    try {
+      await axios.head(master_override)
+      return master_override
+    } catch {
+      console.log(`master override model not found at ${master_override}`)
+    }
+    // See if there is a specific override for the connected vehicle type and frame
+    while (!autopilot.vehicle_type || !frame_type()) {
+      await sleep(100)
+    }
+    const vehicle_override = `/userdata/modeloverrides/${vehicle_folder()}/${frame_name(autopilot.vehicle_type, frame_type())}.glb`
+    try {
+      await axios.head(vehicle_override)
+      return vehicle_override
+    } catch {
+      console.log(`vehicle override model not found at ${vehicle_override}`)
+    }
+    return undefined
+  }
+  
+  export async function get_board_model(board?: string): Promise<string> {
+    if (board === "Navigator" || board === "Navigator64") {
+      const module = await import('@/assets/3d/navigator.glb')
+      return module.default
+    }
+    console.log(`No 3D model for board ${board}`)
+    const module = await import('@/assets/3d/generic_sensor.glb')
+    return module.default
+  }
diff --git a/core/frontend/src/components/wizard/Wizard.vue b/core/frontend/src/components/wizard/Wizard.vue
index 9466dfb50c..5fb40efcb0 100644
--- a/core/frontend/src/components/wizard/Wizard.vue
+++ b/core/frontend/src/components/wizard/Wizard.vue
@@ -85,6 +85,7 @@
           <v-stepper-content step="2">
             <div class="d-flex justify-space-between">
               <model-viewer
+                v-if="model_viewer_supported && model_viewer_ready"
                 v-tooltip="'ROV Setup'"
                 :src="sub_model"
                 :auto-rotate="false"
@@ -94,8 +95,22 @@
                 class="model-button ma-2"
                 @click="setupROV"
               />
+              <v-card
+                v-else
+                v-tooltip="'ROV Setup'"
+                width="300px"
+                class="model-button ma-2 d-flex flex-column align-center justify-center"
+                outlined
+                tile
+                @click="setupROV"
+              >
+                <v-icon size="64">
+                  mdi-submarine
+                </v-icon>
+              </v-card>
 
               <model-viewer
+                v-if="model_viewer_supported && model_viewer_ready"
                 v-tooltip="'Boat Setup'"
                 :src="boat_model"
                 :auto-rotate="false"
@@ -105,6 +120,19 @@
                 class="model-button ma-2"
                 @click="setupBoat"
               />
+              <v-card
+                v-else
+                v-tooltip="'Boat Setup'"
+                width="300px"
+                class="model-button ma-2 d-flex flex-column align-center justify-center"
+                outlined
+                tile
+                @click="setupBoat"
+              >
+                <v-icon size="64">
+                  mdi-ferry
+                </v-icon>
+              </v-card>
               <v-icon
                 v-tooltip="'Other Vehicle Setup'"
                 class="model-button ma-2 other-button"
@@ -267,8 +295,6 @@
 </template>
 
 <script lang="ts">
-import '@google/model-viewer/dist/model-viewer'
-
 import { SemVer } from 'semver'
 import Vue from 'vue'
 
@@ -289,6 +315,7 @@ import { Firmware, Vehicle, vehicleTypeFromString } from '@/types/autopilot'
 import { Dictionary } from '@/types/common'
 import back_axios from '@/utils/api'
 import { sleep } from '@/utils/helper_functions'
+import { canUseModelViewer, ensureModelViewer } from '@/utils/model_viewer_support'
 
 import ActionStepper, { Configuration, ConfigurationStatus } from './ActionStepper.vue'
 import DefaultParamLoader from './DefaultParamLoader.vue'
@@ -300,6 +327,7 @@ const WIZARD_VERSION = 4
 const REPOSITORY_ROOT = 'https://docs.bluerobotics.com/Blueos-Parameter-Repository'
 
 const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+const MODEL_VIEWER_SUPPORTED = canUseModelViewer()
 
 function get_model(vehicle_name: string, frame_name: string): undefined | string {
   const release_path = `assets/vehicles/models/${vehicle_name}/${frame_name}.glb`
@@ -356,6 +384,8 @@ export default Vue.extend({
       // Vehicle configuration page logic
       vehicle_configuration_pages: [] as VehicleConfigurationPage[],
       configuration_page_index: 0,
+      model_viewer_supported: MODEL_VIEWER_SUPPORTED,
+      model_viewer_ready: false,
     }
   },
   computed: {
@@ -403,6 +433,14 @@ export default Vue.extend({
       },
     },
   },
+  created() {
+    if (this.model_viewer_supported) {
+      ensureModelViewer().then((loaded) => {
+        this.model_viewer_supported = loaded
+        this.model_viewer_ready = loaded
+      })
+    }
+  },
   async mounted() {
     this.retry_count = 0
 
@@ -720,6 +758,10 @@ export default Vue.extend({
   transition: background-color 0.3s, color 0.3s;
 }
 
+.model-button.v-card {
+  background-color: transparent;
+}
+
 .model-button:hover {
   background-color: #00000040;
   color: #fff;
diff --git a/core/frontend/src/store/ardupilot_sensors.ts b/core/frontend/src/store/ardupilot_sensors.ts
new file mode 100644
index 0000000000..8aed47f329
--- /dev/null
+++ b/core/frontend/src/store/ardupilot_sensors.ts
@@ -0,0 +1,176 @@
+import {
+    getModule,
+  Module, VuexModule,
+} from 'vuex-module-decorators'
+
+import store from '@/store'
+import autopilot_data from "./autopilot"
+import { Dictionary } from "@/types/common"
+import decode, { deviceId } from '@/utils/deviceid_decoder'
+
+import { vec3 } from 'gl-matrix'
+import { every } from 'lodash'
+
+@Module({
+    dynamic: true,
+    store,
+    name: 'ardupilot_sensors',
+  })
+
+class ArdupilotSensorsStore extends VuexModule {
+
+    get accelerometers(): deviceId[]  {
+        return autopilot_data.parameterRegex('^INS_ACC.*_ID')
+        .filter((param) => param.value !== 0)
+        .map((parameter) => decode(parameter.name, parameter.value))
+      }
+    
+      get compasses(): deviceId[] {
+        return autopilot_data.parameterRegex('^COMPASS_DEV_ID.*')
+          .filter((param) => param.value !== 0)
+          .map((parameter) => decode(parameter.name, parameter.value))
+      }
+    
+      get baros(): deviceId[] {
+        return autopilot_data.parameterRegex('^BARO.*_DEVID')
+          .filter((param) => param.value !== 0)
+          .map((parameter) => decode(parameter.name, parameter.value))
+      }
+    
+      get accelerometers_calibrated() {
+        const results = {} as Dictionary<boolean>
+        for (const imu of ardupilot_sensors.accelerometers) {
+          const param_radix = imu.param.split('_ID')[0]
+          const offset_params_names = [`${param_radix}OFFS_X`, `${param_radix}OFFS_Y`, `${param_radix}OFFS_Z`]
+          const scale_params_names = [`${param_radix}SCAL_X`, `${param_radix}SCAL_Y`, `${param_radix}SCAL_Z`]
+          const offset_params = offset_params_names.map(
+            (name) => autopilot_data.parameter(name),
+          )
+          const scale_params = scale_params_names.map(
+            (name) => autopilot_data.parameter(name),
+          )
+          const is_at_default_offsets = offset_params.every((param) => param?.value === 0.0)
+          const is_at_default_scale = scale_params.every((param) => param?.value === 1.0)
+          results[imu.param] = offset_params.isEmpty() || scale_params.isEmpty()
+          || !is_at_default_offsets || !is_at_default_scale
+        }
+        return results
+      }
+    
+      get accelerometers_temperature_calibrated() {
+        const results = {} as Dictionary<{ calibrated: boolean, calibrationTemperature: number }>
+        for (const accelerometer of ardupilot_sensors.accelerometers) {
+
+          let param_radix = accelerometer.param.split('_ID')[0]
+          // CALTEMP parameters contains ID for the first sensor, _ID does not, so we need to add it
+          if (!/\d$/.test(param_radix)) {
+            param_radix += '1'
+          }
+          const name = `${param_radix}_CALTEMP`
+          const parameter = autopilot_data.parameter(name)
+          results[accelerometer.param] = {
+            calibrated: parameter !== undefined && parameter.value !== -300,
+            calibrationTemperature: parameter?.value ?? 0,
+          }
+        }
+        return results
+      }
+    
+      get enabled_compasses_ids(): (undefined | number)[] {
+        return [1,2,3].map((index) => autopilot_data.parameter(`COMPASS_PRIO${index}_ID`)?.value)
+      }
+    
+      get all_enabled_compasses_calibrated(): Dictionary<boolean> {
+        return Object.fromEntries(
+          Object.entries(this.compass_calibrated).filter(([key, _]) => {
+          const compass_dev_id = autopilot_data.parameter(key)?.value
+          return this.enabled_compasses_ids.includes(compass_dev_id)
+        }))
+      }
+    
+      get compass_calibrated() {
+        const results = {} as Dictionary<boolean>
+        for (const compass of ardupilot_sensors.compasses) {
+          const compass_number = compass.param.split('COMPASS_DEV_ID')[1]
+          const offset_params_names = [
+            `COMPASS_OFS${compass_number}_X`,
+            `COMPASS_OFS${compass_number}_Y`,
+            `COMPASS_OFS${compass_number}_Z`,
+          ]
+          const diagonal_params_names = [
+            `COMPASS_ODI${compass_number}_X`,
+            `COMPASS_ODI${compass_number}_Y`,
+            `COMPASS_ODI${compass_number}_Z`,
+          ]
+    
+          const offset_params = offset_params_names.map(
+            (name) => autopilot_data.parameter(name),
+          )
+          const diagonal_params = diagonal_params_names.map(
+            (name) => autopilot_data.parameter(name),
+          )
+          if (offset_params.includes(undefined) || diagonal_params.includes(undefined)) {
+            results[compass.param] = false
+            continue
+          }
+          const is_at_default_offsets = offset_params.every((param) => param?.value === 0.0)
+          const is_at_default_diagonals = diagonal_params.every((param) => param?.value === 0.0)
+          results[compass.param] = !offset_params.isEmpty() && !diagonal_params.isEmpty()
+            && (!is_at_default_offsets || !is_at_default_diagonals)
+        }
+        return results
+      }
+    
+      get gyroscope_offsets(): Array<vec3> {
+        let all_offsets = [];
+        for (let index = 1; index <= 3; index++) {
+          const suffix = index === 1 ? '' : index.toString()
+    
+          const gyrId = autopilot_data.parameter(`INS_GYR${suffix}_ID`)
+          if (gyrId?.value === 0) continue;
+    
+          const offsets = ['X', 'Y', 'Z'].map((axis) => {
+            const rawValue = autopilot_data.parameter(`INS_GYR${suffix}OFFS_${axis}`)?.value
+            return rawValue ? rawValue * 1000 : null
+          }) as vec3
+          all_offsets.push(offsets)
+        }
+        return all_offsets
+      }
+    
+      get gyroscope_calibrated(): boolean[] {
+        const results = []
+        for (const gyroscope of this.gyroscope_offsets) {
+          results.push(gyroscope.every((param) => param !== 0.0))
+        }
+        return results
+      }
+    
+      get barometer_calibrated() {
+        const results = {} as Dictionary<boolean>
+          for (const baro of ardupilot_sensors.baros) {
+            const radix = baro.param.replace('_DEVID', '')
+            const calibration_param = autopilot_data.parameter(`${radix}_GND_PRESS`)
+            results[baro.param] = calibration_param?.value !== 0
+          }
+          return results
+      }
+
+      get sensors(): Dictionary<boolean> {
+        return {
+          compass: every(Object.values(ardupilot_sensors.all_enabled_compasses_calibrated)),
+          accelerometer: every(Object.values(ardupilot_sensors.accelerometers_calibrated)),
+          gyroscope: every(Object.values(ardupilot_sensors.gyroscope_calibrated)),
+          baro: every(Object.values(ardupilot_sensors.barometer_calibrated)),
+        }
+      }
+
+    get all_sensors_calibrated() : boolean {
+      return Object.values(ardupilot_sensors.sensors).every((value) => value)
+    }
+}
+
+export { ArdupilotSensorsStore }
+
+const ardupilot_sensors: ArdupilotSensorsStore = getModule(ArdupilotSensorsStore)
+export default ardupilot_sensors
diff --git a/core/frontend/src/store/autopilot.ts b/core/frontend/src/store/autopilot.ts
index 9e22a8fa40..e890f01ec1 100644
--- a/core/frontend/src/store/autopilot.ts
+++ b/core/frontend/src/store/autopilot.ts
@@ -2,13 +2,30 @@ import {
   getModule, Module, Mutation, VuexModule,
 } from 'vuex-module-decorators'
 
-import { MavAutopilot } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
+import { MavAutopilot, MavType } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
 import { Message as M2R } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-message'
 import store from '@/store'
 import Parameter from '@/types/autopilot/parameter'
 // eslint-disable-next-line import/no-cycle
 import ParameterFetcher from '@/types/autopilot/parameter-fetcher'
 
+
+import {
+  FRAME_CLASS as ROVER_FRAME_CLASS,
+  FRAME_TYPE as ROVER_FRAME_TYPE,
+} from '@/types/autopilot/parameter-rover-enums'
+
+import {
+  FRAME_CONFIG as SUB_FRAME_CONFIG,
+} from '@/types/autopilot/parameter-sub-enums'
+
+import autopilot_manager from './autopilot_manager'
+
+import { vehicle_folder } from '@/components/vehiclesetup/viewers/modelHelper'
+
+const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+
+
 const parameterFetcher = new ParameterFetcher()
 
 @Module({
@@ -55,6 +72,50 @@ class AutopilotStore extends VuexModule {
     )
   }
 
+
+  get vehicle_type(): string {
+    return autopilot_manager.vehicle_type
+  }
+
+  get frame_type(): number | undefined {
+    const mav_type = 'MAV_TYPE_' + autopilot_manager.vehicle_type?.toUpperCase().replace(' ', '_')
+    switch (mav_type) {
+      case MavType.MAV_TYPE_SUBMARINE:
+        return this.parameter('FRAME_CONFIG')?.value
+      case MavType.MAV_TYPE_SURFACE_BOAT:
+        return this.parameter('FRAME_CLASS')?.value
+        // TODO: other vehicles
+      default:
+        return undefined
+    }
+  }
+
+  get frame_name(): string | undefined {
+    switch (this.vehicle_type) {
+      case 'Submarine':
+        return Object.entries(SUB_FRAME_CONFIG).find((key, value) => value === this.frame_type)?.[1] as string
+      case 'Surface Boat':
+        // we already know it is a boat, so check only TYPE and ignore CLASS (rover/boat/balancebot)
+        return Object.entries(ROVER_FRAME_CLASS).find((key, value) => value === this.frame_type)?.[1] as string
+     default:
+        break
+    }
+    return undefined
+  }
+
+
+  get vehicle_model() {
+    const frame = this.frame_type
+    if (!this.vehicle_type || frame === undefined) {
+      return ''
+    }
+    const release_path = `assets/vehicles/models/${vehicle_folder()}/${this.frame_name}.glb`
+    if (models[`/public/${release_path}`]) {
+      return `/assets/vehicles/models/${vehicle_folder()}/${this.frame_name}.glb`
+    }
+    return ''
+  }
+
   get is_safe() {
     // We can potentially check for external things here
     return !this.verhicle_armed
diff --git a/core/frontend/src/utils/deviceid_decoder.ts b/core/frontend/src/utils/deviceid_decoder.ts
index 82d33ece5d..b188bffc60 100755
--- a/core/frontend/src/utils/deviceid_decoder.ts
+++ b/core/frontend/src/utils/deviceid_decoder.ts
@@ -90,9 +90,13 @@ enum BARO_TYPE {
   ICP101XX = 0x0F,
   ICP201XX = 0x10,
   MS5607 = 0x11,
-  MS5837 = 0x12,
+  MS5837_30BA = 0x12,
   MS5637 = 0x13,
   BMP390 = 0x14,
+  BMP581 = 0x15,
+  SPA06 = 0x16,
+  AUAV = 0x17,
+  MS5837_02BA = 0x18,
 }
 
 enum AIRSPEED_TYPE {
diff --git a/core/frontend/src/utils/model_viewer_support.ts b/core/frontend/src/utils/model_viewer_support.ts
new file mode 100644
index 0000000000..e4c3745edf
--- /dev/null
+++ b/core/frontend/src/utils/model_viewer_support.ts
@@ -0,0 +1,38 @@
+let cachedSupport: boolean | undefined
+let loadPromise: Promise<boolean> | undefined
+
+function hasDOM(): boolean {
+  return globalThis.window !== undefined && globalThis.document !== undefined
+}
+
+function canCreateWebGLContext(): boolean {
+  if (!hasDOM()) {
+    return false
+  }
+  try {
+    const canvas = globalThis.document.createElement('canvas')
+    const context = canvas.getContext('webgl') ?? canvas.getContext('experimental-webgl')
+    return context !== null
+  } catch (error) {
+    console.warn('WebGL detection error:', error)
+    return false
+  }
+}
+
+export function canUseModelViewer(): boolean {
+  cachedSupport ??= canCreateWebGLContext()
+  return cachedSupport
+}
+
+export function ensureModelViewer(): Promise<boolean> {
+  if (!canUseModelViewer()) {
+    return Promise.resolve(false)
+  }
+  loadPromise ??= import('@google/model-viewer/dist/model-viewer')
+    .then(() => true)
+    .catch((error) => {
+      console.warn('Failed to load model-viewer, proceeding without 3D viewer.', error)
+      return false
+    })
+  return loadPromise
+}
diff --git a/core/frontend/src/utils/servoGpio.ts b/core/frontend/src/utils/servoGpio.ts
new file mode 100644
index 0000000000..8c4d72f34e
--- /dev/null
+++ b/core/frontend/src/utils/servoGpio.ts
@@ -0,0 +1,13 @@
+/**
+ * Maps a 1-based servo channel number to the corresponding GPIO number for ArduPilot.
+ * Navigator boards use 1:1; most others follow Pixhawk1 (main 1–8 → 101–108, aux 9–16 → 50–57).
+ */
+export function servoNumberToGpio(servoNumber: number, boardName: string | undefined): number {
+  if (boardName?.startsWith('Navigator')) {
+    return servoNumber
+  }
+  if (servoNumber <= 8) {
+    return servoNumber + 100
+  }
+  return servoNumber - 9 + 50
+}
diff --git a/core/frontend/vite.config.js b/core/frontend/vite.config.js
index b771518c25..b4f999a301 100644
--- a/core/frontend/vite.config.js
+++ b/core/frontend/vite.config.js
@@ -86,8 +86,29 @@ export default defineConfig(({ command, mode }) => {
         deleteOriginFile: true,
         filter: /\.(js|css|json|svg|txt|xml|wasm|glb)$/i,
       }),
+      // Fix Draco imports in dev server
+      {
+        name: 'draco-dev-fix',
+        apply: 'serve',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url?.includes('/node_modules/three/examples/jsm/libs/draco/')) {
+              const fs = require('fs')
+              const filePath = path.join(__dirname, req.url)
+              if (fs.existsSync(filePath)) {
+                const ext = path.extname(req.url)
+                if (ext === '.wasm') res.setHeader('Content-Type', 'application/wasm')
+                else if (ext === '.js') res.setHeader('Content-Type', 'application/javascript')
+                res.end(fs.readFileSync(filePath))
+                return
+              }
+            }
+            next()
+          })
+        }
+      }
     ],
-    assetsInclude: ['**/*.gif', '**/*.glb', '**/*.png', '**/*.svg'],
+    assetsInclude: ['**/*.gif', '**/*.glb', '**/*.png', '**/*.svg', '**/assets/ArduPilot-Parameter-Repository**.json', '**/*.msg', "**/three/examples/jsm/libs/draco/*"],
     resolve: {
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
       alias: {
@@ -100,6 +121,22 @@ export default defineConfig(({ command, mode }) => {
         input: {
           main: path.resolve(__dirname, 'index.html'),
         },
+        output: {
+          assetFileNames: (assetInfo) => {
+            // List of file patterns to excluded from hashing
+            const noHashPatterns = [
+              /ArduPilot-Parameter-Repository.*\.json$/,
+              /three\/examples\/jsm\/libs\/draco\//
+            ];
+
+            if (assetInfo.name) {
+              if (noHashPatterns.some(pattern => pattern.test(assetInfo.name))) {
+                return `assets/[name][extname]`;
+              }
+            }
+            return `assets/[name]-[hash][extname]`;
+          }
+        }
       },
     },
     define: {
@@ -108,6 +145,9 @@ export default defineConfig(({ command, mode }) => {
     },
     server: {
       port: 8080,
+      fs: {
+        allow: ['..', './node_modules']
+      },
       proxy: {
         '^/status': {
           target: SERVER_ADDRESS,