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..60fe9a65f1
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/RelaySetup.vue
@@ -0,0 +1,94 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6">
+          <span class="text-h6">Relay {{ relay_number }}</span>
+        </v-col>
+        <v-col cols="6" class="d-flex justify-end">
+          <v-btn
+            v-tooltip="'Turn relay off'"
+            small
+            @click="setRelay(0)"
+          >
+            <v-icon small left>
+              mdi-power-off
+            </v-icon>
+            Relay Off
+          </v-btn>
+          <v-btn
+            v-tooltip="'Turn relay on'"
+            small
+            @click="setRelay(1)"
+          >
+            <v-icon small left>
+              mdi-power
+            </v-icon>
+            Relay On
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row align="center">
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="inverted_parameter"
+            :parameter="inverted_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Invert Output"
+          />
+        </v-col>
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="default_parameter"
+            :parameter="default_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Startup State"
+          />
+        </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..b5d8285b5b
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionActuatorEditor.vue
@@ -0,0 +1,73 @@
+<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="error"
+          >
+            <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'
+
+export default Vue.extend({
+  name: 'ServoFunctionActuatorEditor',
+  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
+      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..47bf6a26b1
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue
@@ -0,0 +1,182 @@
+<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"
+    />
+  </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'
+
+export default Vue.extend({
+  name: 'ServoFunctionGpioEditor',
+  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
+      if (this.board_name?.startsWith('Navigator')) {
+        return this.servo_number
+      }
+      // We are assuming most boards follow the same GPIO numbering scheme as the Pixhawk1
+      // Aux channels start at 50, and Main channels start at 101
+
+      if (this.servo_number <= 8) {
+        return this.servo_number + 100
+      }
+      return this.servo_number - 9 + 50
+    },
+    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
+      }
+      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')
+        const pinParam = this.function_pin_parameter_using_this_gpio
+        if (pinParam) {
+          mavlink2rest.setParam(pinParam.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')
+        const pinParam = this.function_pin_parameter_using_this_gpio
+        if (pinParam) {
+          mavlink2rest.setParam(pinParam.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..98626a119a
--- /dev/null
+++ b/core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
@@ -0,0 +1,137 @@
+<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="Motor Configuration"
+      tooltip="Adjust the minimum, trim, and maximum PWM values for this motor"
+    />
+    <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: {
+    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)
+    },
+    trim_param(): Parameter | undefined {
+      if (this.mot_pwm_type === PwmTypes.Normal) {
+        return autopilot.parameter(`MOT_${this.motor_number}_TRIM`)
+      }
+      if (this.mot_pwm_type === PwmTypes.PWMAngle) {
+        return this.getParamByType('_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..ed8bc5db60
--- /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="minParam?.name"
+              :param="minParam"
+            />
+          </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="trimParam?.name ?? 'Trim'"
+              :param="trimParam"
+            />
+          </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="maxParam?.name"
+              :param="maxParam"
+            />
+          </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/PwmSetup.vue b/core/frontend/src/components/vehiclesetup/PwmSetup.vue
index 00502c901c..62e6c35144 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'
@@ -376,6 +377,30 @@ 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> {
+      const isNavigator = this.board_name?.includes('Navigator')
+      return Object.fromEntries(
+        Array.from({ length: 16 }, (_, i) => {
+          const servo = i + 1
+          if (isNavigator) {
+            return [servo, servo]
+          }
+          if (servo <= 8) {
+            return [servo, servo + 100]
+          }
+          return [servo, servo - 9 + 50]
+        }),
+      )
+    },
   },
   watch: {
     is_armed() {
@@ -392,6 +417,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 +482,25 @@ 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]
+        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 `Unknown GPIO ${gpio}`
+      }
+      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