diff --git a/android/app/src/main/java/betaflight/configurator/protocols/tcp/BetaflightTcpPlugin.java b/android/app/src/main/java/betaflight/configurator/protocols/tcp/BetaflightTcpPlugin.java
new file mode 100644
index 00000000000..3b63b4b122d
--- /dev/null
+++ b/android/app/src/main/java/betaflight/configurator/protocols/tcp/BetaflightTcpPlugin.java
@@ -0,0 +1,327 @@
+package betaflight.configurator.protocols.tcp;
+
+import android.util.Base64;
+import android.util.Log;
+import com.getcapacitor.JSObject;
+import com.getcapacitor.Plugin;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.annotation.CapacitorPlugin;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.net.InetSocketAddress;
+import java.net.Socket;
+import java.util.Arrays;
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.concurrent.locks.ReentrantLock;
+
+/**
+ * Capacitor plugin that provides raw TCP socket functionality with thread safety,
+ * robust resource management, and comprehensive error handling.
+ */
+@CapacitorPlugin(name = "BetaflightTcp")
+public class BetaflightTcpPlugin extends Plugin {
+    private static final String TAG = "BetaflightTcp";
+
+    // Error messages
+    private static final String ERROR_IP_REQUIRED = "IP address is required";
+    private static final String ERROR_INVALID_PORT = "Invalid port number";
+    private static final String ERROR_ALREADY_CONNECTED = "Already connected; please disconnect first";
+    private static final String ERROR_NOT_CONNECTED = "Not connected to any server";
+    private static final String ERROR_DATA_REQUIRED = "Data is required";
+    private static final String ERROR_CONNECTION_LOST = "Connection lost";
+    private static final String ERROR_CONNECTION_CLOSED = "Connection closed by peer";
+
+    // Connection settings
+    private static final int DEFAULT_TIMEOUT_MS = 30_000;
+    private static final int MIN_PORT = 1;
+    private static final int MAX_PORT = 65535;
+
+    private enum ConnectionState {
+        DISCONNECTED,
+        CONNECTING,
+        CONNECTED,
+        DISCONNECTING,
+        ERROR
+    }
+
+    // Thread-safe state and locks
+    private final AtomicReference<ConnectionState> state = new AtomicReference<>(ConnectionState.DISCONNECTED);
+    private final ReentrantLock socketLock = new ReentrantLock();
+    private final ReentrantLock writerLock = new ReentrantLock();
+
+    private Socket socket;
+    private InputStream input;
+    private OutputStream output;
+    private Thread readerThread;
+    private volatile boolean readerRunning = false;
+
+    @PluginMethod
+    public void connect(final PluginCall call) {
+        call.setKeepAlive(true);
+        final String ip = call.getString("ip");
+
+        Integer portObj = call.getInt("port");
+        final int port = (portObj != null) ? portObj : -1;
+
+        if (ip == null || ip.isEmpty()) {
+            call.reject(ERROR_IP_REQUIRED);
+            call.setKeepAlive(false);
+            return;
+        }
+        
+        if (!compareAndSetState(ConnectionState.DISCONNECTED, ConnectionState.CONNECTING)) {
+            call.reject(ERROR_ALREADY_CONNECTED);
+            call.setKeepAlive(false);
+            return;
+        }
+
+
+        new Thread(() -> {
+            socketLock.lock();
+            try {
+                socket = new Socket();
+                InetSocketAddress address = new InetSocketAddress(ip, port);
+                socket.connect(address, DEFAULT_TIMEOUT_MS);
+                socket.setSoTimeout(DEFAULT_TIMEOUT_MS);
+
+                input = socket.getInputStream();
+                output = socket.getOutputStream();
+
+                state.set(ConnectionState.CONNECTED);
+                JSObject result = new JSObject();
+                result.put("success", true);
+                call.resolve(result);
+                Log.d(TAG, "Connected to " + ip + (port != -1 ? (":" + port) : ""));
+
+                startReaderThread();
+            } catch (Exception e) {
+                state.set(ConnectionState.ERROR);
+                closeResourcesInternal();
+                state.set(ConnectionState.DISCONNECTED);
+                call.reject("Connection failed: " + e.getMessage());
+                Log.e(TAG, "Connection failed", e);
+            } finally {
+                socketLock.unlock();
+                call.setKeepAlive(false);
+            }
+        }).start();
+    }
+    
+    @PluginMethod
+    public void send(final PluginCall call) {
+        String data = call.getString("data");
+        if (data == null || data.isEmpty()) {
+            call.reject(ERROR_DATA_REQUIRED);
+            return;
+        }
+        if (state.get() != ConnectionState.CONNECTED) {
+            call.reject(ERROR_NOT_CONNECTED);
+            return;
+        }
+        call.setKeepAlive(true);
+
+        new Thread(() -> {
+            writerLock.lock();
+            try {
+                if (output == null || state.get() != ConnectionState.CONNECTED) {
+                    call.reject(ERROR_CONNECTION_LOST);
+                    return;
+                }
+                byte[] payload = Base64.decode(data, Base64.NO_WRAP);
+                output.write(payload);
+                output.flush();
+
+                JSObject result = new JSObject();
+                result.put("success", true);
+                call.resolve(result);
+                Log.d(TAG, "Sent " + payload.length + " bytes");
+            } catch (Exception e) {
+                handleCommunicationError(e, "Send failed", call);
+            } finally {
+                writerLock.unlock();
+                call.setKeepAlive(false);
+            }
+        }).start();
+    }
+
+    @PluginMethod
+    public void receive(final PluginCall call) {
+        // Deprecated by continuous reader (Task 2)
+        JSObject result = new JSObject();
+        result.put("data", "");
+        call.reject("Continuous read active. Listen for 'dataReceived' events instead.");
+    }
+
+    @PluginMethod
+    public void disconnect(final PluginCall call) {
+        ConnectionState current = state.get();
+        if (current == ConnectionState.DISCONNECTED) {
+            JSObject result = new JSObject();
+            result.put("success", true);
+            call.resolve(result);
+            return;
+        }
+        if (!compareAndSetState(current, ConnectionState.DISCONNECTING)) {
+            call.reject("Invalid state for disconnect: " + current);
+            return;
+        }
+        call.setKeepAlive(true);
+
+        new Thread(() -> {
+            socketLock.lock();
+            try {
+                closeResourcesInternal();
+                state.set(ConnectionState.DISCONNECTED);
+                JSObject result = new JSObject();
+                result.put("success", true);
+                call.resolve(result);
+                Log.d(TAG, "Disconnected successfully");
+            } catch (Exception e) {
+                state.set(ConnectionState.ERROR);
+                // Ensure cleanup completes even on error
+                try {
+                    closeResourcesInternal();
+                } catch (Exception ce) {
+                    Log.e(TAG, "Cleanup error during disconnect", ce);
+                }
+                call.reject("Disconnect failed: " + e.getMessage());
+                Log.e(TAG, "Disconnect failed", e);
+                // Reset to a clean disconnected state after handling error
+                state.set(ConnectionState.DISCONNECTED);
+            } finally {
+                socketLock.unlock();
+                call.setKeepAlive(false);
+            }
+        }).start();
+    }
+
+    @PluginMethod
+    public void getStatus(final PluginCall call) {
+        JSObject result = new JSObject();
+        result.put("connected", state.get() == ConnectionState.CONNECTED);
+        result.put("state", state.get().toString());
+        call.resolve(result);
+    }
+
+    @Override
+    protected void handleOnDestroy() {
+        socketLock.lock();
+        try {
+            state.set(ConnectionState.DISCONNECTING);
+            closeResourcesInternal();
+            state.set(ConnectionState.DISCONNECTED);
+        } catch (Exception e) {
+            Log.e(TAG, "Error cleaning up resources on destroy", e);
+        } finally {
+            socketLock.unlock();
+        }
+        super.handleOnDestroy();
+    }
+
+    private void startReaderThread() {
+        if (readerThread != null && readerThread.isAlive()) return;
+        readerRunning = true;
+        readerThread = new Thread(() -> {
+            Log.d(TAG, "Reader thread started");
+            try {
+                byte[] buf = new byte[4096];
+                while (readerRunning && state.get() == ConnectionState.CONNECTED && input != null) {
+                    int read = input.read(buf);
+                    if (read == -1) {
+                        notifyDisconnectFromPeer();
+                        break;
+                    }
+                    if (read > 0) {
+                        byte[] chunk = Arrays.copyOf(buf, read);
+                        String b64 = Base64.encodeToString(chunk, Base64.NO_WRAP);
+                        JSObject payload = new JSObject();
+                        payload.put("data", b64);
+                        notifyListeners("dataReceived", payload);
+                    }
+                }
+            } catch (Exception e) {
+                if (readerRunning) {
+                    Log.e(TAG, "Reader thread error", e);
+                    JSObject err = new JSObject();
+                    err.put("error", e.getMessage());
+                    notifyListeners("dataReceivedError", err);
+                    handleCommunicationError(e, "Receive failed", null);
+                }
+            } finally {
+                Log.d(TAG, "Reader thread stopped");
+            }
+        }, "SocketReaderThread");
+        readerThread.start();
+    }
+
+    private void notifyDisconnectFromPeer() {
+        Log.d(TAG, "Peer closed connection");
+        JSObject evt = new JSObject();
+        evt.put("reason", "peer_closed");
+        notifyListeners("connectionClosed", evt);
+        socketLock.lock();
+        try {
+            state.set(ConnectionState.ERROR);
+            closeResourcesInternal();
+            state.set(ConnectionState.DISCONNECTED);
+        } finally {
+            socketLock.unlock();
+        }
+    }
+
+    private void stopReaderThread() {
+        readerRunning = false;
+        if (readerThread != null) {
+            try {
+                readerThread.interrupt();
+                readerThread.join(500);
+            } catch (InterruptedException ignored) {}
+            readerThread = null;
+        }
+    }
+
+    private void closeResourcesInternal() {
+        stopReaderThread();
+        if (input != null) { try { input.close(); } catch (IOException e) { Log.e(TAG, "Error closing input stream", e); } finally { input = null; } }
+        if (output != null) { try { output.close(); } catch (IOException e) { Log.e(TAG, "Error closing output stream", e); } finally { output = null; } }
+        if (socket != null) { try { socket.close(); } catch (IOException e) { Log.e(TAG, "Error closing socket", e); } finally { socket = null; } }
+    }
+
+    private void handleCommunicationError(Exception error, String message, PluginCall call) {
+        socketLock.lock();
+        try {
+            state.set(ConnectionState.ERROR);
+            closeResourcesInternal();
+            state.set(ConnectionState.DISCONNECTED);
+
+            String fullMsg = message + ": " + (error != null ? error.getMessage() : "unknown error");
+            if (call != null) {
+                call.reject(fullMsg);
+            } else {
+                // No PluginCall available (e.g., background reader thread). Log the error.
+                Log.e(TAG, fullMsg, error);
+                // Optionally notify listeners (commented to avoid duplicate notifications):
+                // JSObject err = new JSObject();
+                // err.put("error", fullMsg);
+                // notifyListeners("socketError", err);
+            }
+            Log.e(TAG, message, error);
+        } finally {
+            socketLock.unlock();
+        }
+    }
+
+    private boolean compareAndSetState(ConnectionState expected, ConnectionState newState) {
+        return state.compareAndSet(expected, newState);
+    }
+
+    private String truncateForLog(String data) {
+        if (data == null) return "null";
+        final int maxLen = 100;
+        if (data.length() <= maxLen) return data;
+        return data.substring(0, maxLen) + "... (" + data.length() + " chars)";
+    }
+}
diff --git a/locales/en/messages.json b/locales/en/messages.json
index ba6c71a66ed..95a3d9cf180 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -1420,6 +1420,9 @@
     "configurationFeatures": {
         "message": "Other Features"
     },
+    "configurationFeatureHelp": {
+        "message": "Help"
+    },
     "configurationReceiver": {
         "message": "Receiver"
     },
@@ -1450,8 +1453,14 @@
     "configurationSpiRxHelp": {
         "message": "<strong>Note:</strong> The SPI RX provider will only work if the required hardware is on board or connected to an SPI bus."
     },
-    "configurationOtherFeaturesHelp": {
-        "message": "<strong>Note:</strong> Not all features are supported by all flight controllers. If you enable a specific feature, and it is disabled after you hit 'Save and Reboot', it means that this feature is not supported on your board."
+    "configurationActiveImu": {
+        "message": "Active IMU"
+    },
+    "configurationSensors": {
+        "message": "Sensor Configuration"
+    },
+    "configurationSensorsHelp": {
+        "message": "Configure additional sensors and advanced features."
     },
     "configurationMagAlignmentHelp": {
         "message": "The magnetometer alignment is the orientation of the magnetometer sensor on the flight controller board. The default is usually correct, but if you have a custom build or a flight controller with a different magnetometer orientation, you may need to adjust this setting."
@@ -1540,6 +1549,30 @@
         "message": "$t(configurationBoardAlignmentYaw.message)",
         "description": "Don't translate!!!"
     },
+    "configurationGyro1AlignmentRoll": {
+        "message": "$t(configurationBoardAlignmentRoll.message)",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro1AlignmentPitch": {
+        "message": "$t(configurationBoardAlignmentPitch.message)",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro1AlignmentYaw": {
+        "message": "$t(configurationBoardAlignmentYaw.message)",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentRoll": {
+        "message": "$t(configurationBoardAlignmentRoll.message)",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentPitch": {
+        "message": "$t(configurationBoardAlignmentPitch.message)",
+        "description": "Don't translate!!!"
+    },
+    "configurationGyro2AlignmentYaw": {
+        "message": "$t(configurationBoardAlignmentYaw.message)",
+        "description": "Don't translate!!!"
+    },
     "configurationSensorAlignmentGyro": {
         "message": "GYRO Alignment"
     },
@@ -1576,6 +1609,10 @@
     "configurationSensorAlignmentDefaultOption": {
        "message": "Default"
     },
+    "configurationSensorAlignmentCustom": {
+        "message": "Custom"
+    },
+
     "configurationAccelTrims": {
         "message": "Accelerometer Trim"
     },
@@ -1606,6 +1643,9 @@
     "configurationGyroCalOnFirstArm": {
         "message": "Calibrate Gyro on first arm"
     },
+    "configurationGyroCalOnFirstArmHelp": {
+        "message": "When enabled, the gyroscope will be calibrated on the first arm after power on. This can help reduce gyro drift during flight."
+    },
     "configurationMotorIdle": {
         "message": "Motor Idle (%)"
     },
@@ -7113,7 +7153,8 @@
         "message": "Sends ESC data to the FC via DShot telemetry.  Required by RPM Filtering and dynamic idle. <br> <br>Note: Requires a compatible ESC with appropriate firmware, eg JESC, Jazzmac, BLHeli-32.",
         "description": "Description of the Bidirectional DShot feature of the ESC/Motor"
     },
-    "configurationGyroSyncDenom": {
+
+    "configurationGyroFrequency": {
         "message": "Gyro update frequency"
     },
     "configurationPidProcessDenom": {
diff --git a/src/components/tabs/ConfigurationTab.vue b/src/components/tabs/ConfigurationTab.vue
new file mode 100644
index 00000000000..b0d025e193e
--- /dev/null
+++ b/src/components/tabs/ConfigurationTab.vue
@@ -0,0 +1,1580 @@
+<template>
+    <div class="tab-configuration">
+        <div class="content_wrapper">
+            <div class="tab_title">{{ $t("tabConfiguration") }}</div>
+            <div class="cf_doc_version_bt">
+                <a
+                    id="button-documentation"
+                    href="https://betaflight.com/docs/wiki/configurator/configuration-tab"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :aria-label="$t('betaflightSupportButton')"
+                >
+                    {{ $t("betaflightSupportButton") }}
+                </a>
+            </div>
+            <div class="note">
+                <p v-html="$t('configurationFeaturesHelp')"></p>
+            </div>
+
+            <div class="grid-row grid-box col2">
+                <div class="col-span-1">
+                    <!-- SYSTEM CONFIGURATION -->
+                    <div class="systemconfig">
+                        <div class="gui_box grey">
+                            <div class="gui_box_titlebar">
+                                <div class="spacer_box_title">{{ $t("configurationSystem") }}</div>
+                            </div>
+                            <div class="spacer_box">
+                                <div class="note">
+                                    <p class="systemconfigNote" v-html="$t('configurationLoopTimeHelp')"></p>
+                                </div>
+                                <div class="select">
+                                    <input type="text" class="gyroFrequency" readonly :value="gyroFrequencyDisplay" />
+
+                                    <span>{{ $t("configurationGyroFrequency") }}</span>
+                                </div>
+                                <div class="select">
+                                    <select
+                                        class="pidProcessDenom"
+                                        v-model.number="pidAdvancedConfig.pid_process_denom"
+                                    >
+                                        <option v-for="opt in pidDenomOptions" :key="opt.value" :value="opt.value">
+                                            {{ opt.text }}
+                                        </option>
+                                    </select>
+                                    <span>{{ $t("configurationPidProcessDenom") }}</span>
+                                    <div class="helpicon cf_tip" :title="$t('configurationPidProcessDenomHelp')"></div>
+                                </div>
+                                <div class="select">
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            id="accHardwareSwitch"
+                                            class="toggle"
+                                            v-model="accHardwareEnabled"
+                                            :aria-label="$t('configurationAccHardware')"
+                                        />
+                                    </div>
+                                    <span class="freelabel">{{ $t("configurationAccHardware") }}</span>
+                                </div>
+                                <div class="select">
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            id="baroHardwareSwitch"
+                                            class="toggle"
+                                            v-model="baroHardwareEnabled"
+                                            :aria-label="$t('configurationBaroHardware')"
+                                        />
+                                    </div>
+                                    <span class="freelabel">{{ $t("configurationBaroHardware") }}</span>
+                                </div>
+                                <div class="select">
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            id="magHardwareSwitch"
+                                            class="toggle"
+                                            v-model="magHardwareEnabled"
+                                            :aria-label="$t('configurationMagHardware')"
+                                        />
+                                    </div>
+                                    <span class="freelabel">{{ $t("configurationMagHardware") }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- PERSONALIZATION -->
+                    <div class="gui_box grey miscSettings">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationPersonalization") }}</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="number">
+                                <label>
+                                    <input
+                                        type="text"
+                                        v-model="craftName"
+                                        maxlength="16"
+                                        style="width: 100px"
+                                        :aria-label="$t('craftName')"
+                                    />
+                                    <span>{{ $t("craftName") }}</span>
+                                </label>
+                                <div class="helpicon cf_tip" :title="$t('configurationCraftNameHelp')"></div>
+                            </div>
+                            <div class="number pilotName" v-if="showPilotName">
+                                <label>
+                                    <input
+                                        type="text"
+                                        v-model="pilotName"
+                                        maxlength="16"
+                                        style="width: 100px"
+                                        :aria-label="$t('configurationPilotName')"
+                                    />
+                                    <span>{{ $t("configurationPilotName") }}</span>
+                                </label>
+                                <div class="helpicon cf_tip" :title="$t('configurationPilotNameHelp')"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- CAMERA -->
+                    <div class="gui_box grey miscSettings" v-if="accHardwareEnabled">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationCamera") }}</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="number fpvCamAngleDegrees">
+                                <label>
+                                    <input
+                                        type="number"
+                                        name="fpvCamAngleDegrees"
+                                        v-model.number="fpvCamAngleDegrees"
+                                        step="1"
+                                        min="0"
+                                        max="90"
+                                    />
+                                    <span>{{ $t("configurationFpvCamAngleDegrees") }}</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- ARMING -->
+                    <div class="gui_box grey arming" v-if="accHardwareEnabled">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationArming") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationArmingHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="number">
+                                <label>
+                                    <input
+                                        type="number"
+                                        name="small_angle"
+                                        v-model.number="armingConfig.small_angle"
+                                        min="0"
+                                        max="180"
+                                    />
+                                    <span>{{ $t("configurationSmallAngle") }}</span>
+                                </label>
+                                <div class="helpicon cf_tip" :title="$t('configurationSmallAngleHelp')"></div>
+                            </div>
+
+                            <div class="select" v-if="showGyroCalOnFirstArm">
+                                <div>
+                                    <input
+                                        type="checkbox"
+                                        class="toggle"
+                                        id="gyroCalOnFirstArm"
+                                        v-model="armingConfig.gyro_cal_on_first_arm_bool"
+                                    />
+                                </div>
+                                <span class="freelabel">{{ $t("configurationGyroCalOnFirstArm") }}</span>
+                                <div class="helpicon cf_tip" :title="$t('configurationGyroCalOnFirstArmHelp')"></div>
+                            </div>
+
+                            <div class="number" v-if="showAutoDisarmDelay">
+                                <label>
+                                    <input
+                                        type="number"
+                                        name="auto_disarm_delay"
+                                        v-model.number="armingConfig.auto_disarm_delay"
+                                        min="0"
+                                        max="60"
+                                    />
+                                    <span>{{ $t("configurationAutoDisarmDelay") }}</span>
+                                </label>
+                                <div class="helpicon cf_tip" :title="$t('configurationAutoDisarmDelayHelp')"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- FEATURES -->
+                    <div class="gui_box grey features">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationFeatures") }}</div>
+                        </div>
+                        <div class="spacer_box">
+                            <table class="features-table">
+                                <thead class="visually-hidden">
+                                    <tr>
+                                        <th scope="col">{{ $t("configurationFeatureEnabled") }}</th>
+                                        <th scope="col">{{ $t("configurationFeatureName") }}</th>
+                                        <th scope="col">{{ $t("configurationFeatureDescription") }}</th>
+                                        <th scope="col">{{ $t("configurationFeatureHelp") }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="feature in featuresList" :key="feature.bit">
+                                        <td>
+                                            <input
+                                                type="checkbox"
+                                                class="feature toggle"
+                                                :id="'feature' + feature.bit"
+                                                :name="feature.name"
+                                                :checked="isFeatureEnabled(feature)"
+                                                @change="toggleFeature(feature, $event.target.checked)"
+                                            />
+                                        </td>
+                                        <td>
+                                            <div>{{ feature.name }}</div>
+                                        </td>
+                                        <td>
+                                            <span class="xs" v-html="$t('feature' + feature.name)"></span>
+                                        </td>
+                                        <td>
+                                            <span class="sm-min" v-html="$t('feature' + feature.name)"></span>
+                                            <div
+                                                v-if="feature.haveTip"
+                                                class="helpicon cf_tip"
+                                                :title="$t('feature' + feature.name + 'Tip')"
+                                            ></div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-span-1">
+                    <!-- BOARD ALIGNMENT -->
+                    <div class="board acc">
+                        <div class="gui_box grey">
+                            <div class="gui_box_titlebar">
+                                <div class="spacer_box_title">{{ $t("configurationBoardAlignment") }}</div>
+                                <div class="helpicon cf_tip" :title="$t('configurationBoardAlignmentHelp')"></div>
+                            </div>
+                            <div class="spacer_box">
+                                <div class="sensor_align_content">
+                                    <div class="sensor_align_inputs">
+                                        <div class="alignicon roll"></div>
+                                        <label>
+                                            <input
+                                                type="number"
+                                                v-model.number="boardAlignment.roll"
+                                                step="1"
+                                                min="-180"
+                                                max="360"
+                                                :aria-label="$t('configurationBoardAlignmentRoll')"
+                                            />
+                                            <span>{{ $t("configurationBoardAlignmentRoll") }}</span>
+                                        </label>
+                                    </div>
+                                    <div class="sensor_align_inputs">
+                                        <div class="alignicon pitch"></div>
+                                        <label>
+                                            <input
+                                                type="number"
+                                                v-model.number="boardAlignment.pitch"
+                                                step="1"
+                                                min="-180"
+                                                max="360"
+                                                :aria-label="$t('configurationBoardAlignmentPitch')"
+                                            />
+                                            <span>{{ $t("configurationBoardAlignmentPitch") }}</span>
+                                        </label>
+                                    </div>
+                                    <div class="sensor_align_inputs">
+                                        <div class="alignicon yaw"></div>
+                                        <label>
+                                            <input
+                                                type="number"
+                                                v-model.number="boardAlignment.yaw"
+                                                step="1"
+                                                min="-180"
+                                                max="360"
+                                                :aria-label="$t('configurationBoardAlignmentYaw')"
+                                            />
+                                            <span>{{ $t("configurationBoardAlignmentYaw") }}</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- NEW MULTI-GYRO ALIGNMENT (API 1.47+) -->
+                    <div class="gui_box grey" v-if="showMultiGyro">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationGyroAlignment") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationGyroAlignmentHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div
+                                v-for="gyro in gyroList"
+                                :key="gyro.index"
+                                class="gyro-row"
+                                style="margin-bottom: 10px; border-bottom: 1px solid #111; padding-bottom: 10px"
+                            >
+                                <div class="grid-row col2">
+                                    <div class="col-span-1">
+                                        <!-- Gyro Enable Toggle -->
+                                        <div class="select">
+                                            <div>
+                                                <input
+                                                    type="checkbox"
+                                                    class="toggle"
+                                                    :id="'gyro-enable-' + gyro.index"
+                                                    :checked="gyro.enabled"
+                                                    @change="toggleGyro(gyro.index, $event.target.checked)"
+                                                />
+                                            </div>
+                                            <span class="freelabel"
+                                                >{{ $t("sensorStatusGyroShort") }} {{ gyro.index + 1 }}</span
+                                            >
+                                        </div>
+                                    </div>
+                                    <div class="col-span-1">
+                                        <!-- Alignment Dropdown -->
+                                        <div class="select">
+                                            <select
+                                                :value="gyro.align"
+                                                @change="updateGyroAlign(gyro.index, parseInt($event.target.value))"
+                                            >
+                                                <option :value="0">
+                                                    {{ $t("configurationSensorAlignmentDefaultOption") }}
+                                                </option>
+                                                <option
+                                                    v-for="(align, idx) in sensorAlignments"
+                                                    :key="idx"
+                                                    :value="idx + 1"
+                                                >
+                                                    {{ align }}
+                                                </option>
+                                            </select>
+                                            <span>{{ $t("configurationSensorAlignment") }}</span>
+                                        </div>
+
+                                        <!-- Custom Alignment Inputs -->
+                                        <div class="sensor_align_content" v-if="gyro.align === 9">
+                                            <div class="sensor_align_inputs">
+                                                <div class="alignicon roll"></div>
+                                                <label>
+                                                    <input
+                                                        type="number"
+                                                        v-model.number="gyro.roll"
+                                                        step="0.1"
+                                                        min="-180"
+                                                        max="360"
+                                                        @change="
+                                                            sensorAlignment.gyro_align_roll[gyro.index] = gyro.roll
+                                                        "
+                                                    />
+                                                    <span>{{ $t("configurationGyroAlignmentRoll") }}</span>
+                                                </label>
+                                            </div>
+                                            <div class="sensor_align_inputs">
+                                                <div class="alignicon pitch"></div>
+                                                <label>
+                                                    <input
+                                                        type="number"
+                                                        v-model.number="gyro.pitch"
+                                                        step="0.1"
+                                                        min="-180"
+                                                        max="360"
+                                                        @change="
+                                                            sensorAlignment.gyro_align_pitch[gyro.index] = gyro.pitch
+                                                        "
+                                                    />
+                                                    <span>{{ $t("configurationGyroAlignmentPitch") }}</span>
+                                                </label>
+                                            </div>
+                                            <div class="sensor_align_inputs">
+                                                <div class="alignicon yaw"></div>
+                                                <label>
+                                                    <input
+                                                        type="number"
+                                                        v-model.number="gyro.yaw"
+                                                        step="0.1"
+                                                        min="-180"
+                                                        max="360"
+                                                        @change="sensorAlignment.gyro_align_yaw[gyro.index] = gyro.yaw"
+                                                    />
+                                                    <span>{{ $t("configurationGyroAlignmentYaw") }}</span>
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- GYRO ALIGNMENT (Legacy) -->
+                    <div class="gui_box grey" v-if="showSensorAlignment">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationActiveImu") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationGyroAlignmentHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="grid-row col2">
+                                <div class="col-span-1">
+                                    <!-- GYRO ALIGNMENT -->
+                                    <div class="select" v-if="showGyroToUse">
+                                        <select v-model.number="sensorAlignment.gyro_to_use">
+                                            <option value="0">{{ $t("configurationSensorGyroToUseFirst") }}</option>
+                                            <option value="1" v-if="hasSecondGyro">
+                                                {{ $t("configurationSensorGyroToUseSecond") }}
+                                            </option>
+                                            <option value="2" v-if="hasDualGyros">
+                                                {{ $t("configurationSensorGyroToUseBoth") }}
+                                            </option>
+                                        </select>
+                                        <span>{{ $t("configurationSensorGyroToUse") }}</span>
+                                    </div>
+                                </div>
+                                <div class="col-span-1">
+                                    <div class="select" v-if="showGyro1Align">
+                                        <select v-model.number="sensorAlignment.gyro_1_align">
+                                            <option :value="0">
+                                                {{ $t("configurationSensorAlignmentDefaultOption") }}
+                                            </option>
+                                            <option
+                                                v-for="(align, idx) in sensorAlignments"
+                                                :key="idx"
+                                                :value="idx + 1"
+                                            >
+                                                {{ align }}
+                                            </option>
+                                        </select>
+                                        <span>{{ $t("configurationSensorAlignmentGyro1") }}</span>
+                                    </div>
+
+                                    <div class="sensor_align_content" v-if="sensorAlignment.gyro_1_align === 9">
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon roll"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_1_align_roll"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro1AlignmentRoll')"
+                                                />
+                                                <span>{{ $t("configurationGyro1AlignmentRoll") }}</span>
+                                            </label>
+                                        </div>
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon pitch"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_1_align_pitch"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro1AlignmentPitch')"
+                                                />
+                                                <span>{{ $t("configurationGyro1AlignmentPitch") }}</span>
+                                            </label>
+                                        </div>
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon yaw"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_1_align_yaw"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro1AlignmentYaw')"
+                                                />
+                                                <span>{{ $t("configurationGyro1AlignmentYaw") }}</span>
+                                            </label>
+                                        </div>
+                                    </div>
+
+                                    <div class="select" v-if="showGyro2Align">
+                                        <select v-model.number="sensorAlignment.gyro_2_align">
+                                            <option :value="0">
+                                                {{ $t("configurationSensorAlignmentDefaultOption") }}
+                                            </option>
+                                            <option
+                                                v-for="(align, idx) in sensorAlignments"
+                                                :key="idx"
+                                                :value="idx + 1"
+                                            >
+                                                {{ align }}
+                                            </option>
+                                        </select>
+                                        <span>{{ $t("configurationSensorAlignmentGyro2") }}</span>
+                                    </div>
+
+                                    <div class="sensor_align_content" v-if="sensorAlignment.gyro_2_align === 9">
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon roll"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_2_align_roll"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro2AlignmentRoll')"
+                                                />
+                                                <span>{{ $t("configurationGyro2AlignmentRoll") }}</span>
+                                            </label>
+                                        </div>
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon pitch"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_2_align_pitch"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro2AlignmentPitch')"
+                                                />
+                                                <span>{{ $t("configurationGyro2AlignmentPitch") }}</span>
+                                            </label>
+                                        </div>
+                                        <div class="sensor_align_inputs">
+                                            <div class="alignicon yaw"></div>
+                                            <label>
+                                                <input
+                                                    type="number"
+                                                    v-model.number="sensorAlignment.gyro_2_align_yaw"
+                                                    step="0.1"
+                                                    min="-180"
+                                                    max="360"
+                                                    :aria-label="$t('configurationGyro2AlignmentYaw')"
+                                                />
+                                                <span>{{ $t("configurationGyro2AlignmentYaw") }}</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- MAGNETOMETER ALIGNMENT -->
+                    <div class="gui_box grey" v-if="showMagAlign">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationMagAlignment") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationMagAlignmentHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="select">
+                                <select v-model.number="sensorAlignment.align_mag">
+                                    <option :value="0">
+                                        {{ $t("configurationSensorAlignmentDefaultOption") }}
+                                    </option>
+                                    <option v-for="(align, idx) in sensorAlignments" :key="idx" :value="idx + 1">
+                                        {{ align }}
+                                    </option>
+                                </select>
+                                <span>{{ $t("configurationMagAlignment") }}</span>
+                            </div>
+
+                            <div class="sensor_align_content" v-if="sensorAlignment.align_mag === 9">
+                                <div class="sensor_align_inputs">
+                                    <div class="alignicon roll"></div>
+                                    <label>
+                                        <input
+                                            type="number"
+                                            v-model.number="sensorAlignment.mag_align_roll"
+                                            step="0.1"
+                                            min="-180"
+                                            max="360"
+                                            :aria-label="$t('configurationMagAlignmentRoll')"
+                                        />
+                                        <span>{{ $t("configurationMagAlignmentRoll") }}</span>
+                                    </label>
+                                </div>
+                                <div class="sensor_align_inputs">
+                                    <div class="alignicon pitch"></div>
+                                    <label>
+                                        <input
+                                            type="number"
+                                            v-model.number="sensorAlignment.mag_align_pitch"
+                                            step="0.1"
+                                            min="-180"
+                                            max="360"
+                                            :aria-label="$t('configurationMagAlignmentPitch')"
+                                        />
+                                        <span>{{ $t("configurationMagAlignmentPitch") }}</span>
+                                    </label>
+                                </div>
+                                <div class="sensor_align_inputs">
+                                    <div class="alignicon yaw"></div>
+                                    <label>
+                                        <input
+                                            type="number"
+                                            v-model.number="sensorAlignment.mag_align_yaw"
+                                            step="0.1"
+                                            min="-180"
+                                            max="360"
+                                            :aria-label="$t('configurationMagAlignmentYaw')"
+                                        />
+                                        <span>{{ $t("configurationMagAlignmentYaw") }}</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- OTHER SENSORS -->
+                    <div class="gui_box grey" v-if="showOtherSensors">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationSensors") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationSensorsHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <!-- MAG DECLINATION -->
+                            <div class="number" v-if="showMagDeclination">
+                                <label>
+                                    <input type="number" step="0.1" v-model.number="magDeclination" />
+                                    <span>{{ $t("configurationMagDeclination") }}</span>
+                                </label>
+                            </div>
+
+                            <!-- RANGEFINDER -->
+                            <div class="select" v-if="showRangefinder">
+                                <select v-model.number="sensorConfig.sonar_hardware">
+                                    <option v-for="(type, idx) in sonarTypesList" :key="idx" :value="idx">
+                                        {{ type }}
+                                    </option>
+                                </select>
+                                <span>{{ $t("configurationRangefinder") }}</span>
+                            </div>
+
+                            <!-- OPTICAL FLOW -->
+                            <div class="select" v-if="showOpticalFlow">
+                                <select v-model.number="sensorConfig.opticalflow_hardware">
+                                    <option v-for="(type, idx) in opticalFlowTypesList" :key="idx" :value="idx">
+                                        {{ type }}
+                                    </option>
+                                </select>
+                                <span>{{ $t("configurationOpticalflow") }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- ACCELEROMETER TRIM -->
+                    <div class="gui_box grey" v-if="accHardwareEnabled">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("initialSetupAccelTrimsHead") }}</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="number">
+                                <label>
+                                    <input type="number" name="acc_trim_roll" v-model.number="accelTrims.roll" />
+                                    <span>{{ $t("configurationAccelTrimRoll") }}</span>
+                                </label>
+                            </div>
+                            <div class="number">
+                                <label>
+                                    <input type="number" name="acc_trim_pitch" v-model.number="accelTrims.pitch" />
+                                    <span>{{ $t("configurationAccelTrimPitch") }}</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- DSHOT BEACON -->
+                    <div class="gui_box grey dshotbeeper">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationDshotBeeper") }}</div>
+                            <div class="helpicon cf_tip" :title="$t('configurationDshotBeaconHelp')"></div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="select">
+                                <select class="dshotBeeperBeaconTone" v-model.number="dshotBeaconTone">
+                                    <option value="0">{{ $t("portsTelemetryDisabled") }}</option>
+                                    <option v-for="i in 5" :key="i" :value="i">{{ i }}</option>
+                                </select>
+                                <span>{{ $t("configurationDshotBeaconTone") }}</span>
+                            </div>
+
+                            <div class="beeper-controls">
+                                <button type="button" class="btn beeper-enable-all" @click="enableAllDshot">
+                                    {{ $t("configurationBeeperEnableAll") }}
+                                </button>
+                                <button type="button" class="btn beeper-disable-all" @click="disableAllDshot">
+                                    {{ $t("configurationBeeperDisableAll") }}
+                                </button>
+                            </div>
+
+                            <table class="dshot-beacon-table">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="col-enable">
+                                            {{ $t("configurationFeatureEnabled") }}
+                                        </th>
+                                        <th scope="col" class="col-name">{{ $t("configurationFeatureName") }}</th>
+                                        <th scope="col" class="col-description">
+                                            {{ $t("configurationFeatureDescription") }}
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="cond in dshotBeaconConditionsList" :key="cond.bit">
+                                        <td>
+                                            <input
+                                                type="checkbox"
+                                                class="condition toggle"
+                                                :id="'dshot-cond-' + cond.bit"
+                                                :checked="isDshotConditionEnabled(cond)"
+                                                @change="toggleDshotCondition(cond, $event.target.checked)"
+                                            />
+                                        </td>
+                                        <td>
+                                            <div>{{ cond.name }}</div>
+                                        </td>
+                                        <td>
+                                            <span :title="$t('beeper' + cond.name)">{{
+                                                $t("beeper" + cond.name)
+                                            }}</span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <!-- BEEPER CONFIGURATION -->
+                    <div class="gui_box grey beepers">
+                        <div class="gui_box_titlebar">
+                            <div class="spacer_box_title">{{ $t("configurationBeeper") }}</div>
+                        </div>
+                        <div class="spacer_box">
+                            <div class="beeper-controls">
+                                <button type="button" class="btn beeper-enable-all" @click="enableAllBeepers">
+                                    {{ $t("configurationBeeperEnableAll") }}
+                                </button>
+                                <button type="button" class="btn beeper-disable-all" @click="disableAllBeepers">
+                                    {{ $t("configurationBeeperDisableAll") }}
+                                </button>
+                            </div>
+                            <table class="beeper-configuration-table">
+                                <thead>
+                                    <tr>
+                                        <th scope="col">{{ $t("configurationFeatureEnabled") }}</th>
+                                        <th scope="col">{{ $t("configurationFeatureName") }}</th>
+                                        <th scope="col">{{ $t("configurationFeatureDescription") }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="beeper-configuration">
+                                    <tr
+                                        v-for="beeper in beepersList"
+                                        :key="beeper.bit"
+                                        v-show="beeper.visible !== false"
+                                    >
+                                        <td>
+                                            <input
+                                                type="checkbox"
+                                                class="condition toggle"
+                                                :id="'beeper-' + beeper.bit"
+                                                :checked="isBeeperEnabled(beeper)"
+                                                @change="toggleBeeper(beeper, $event.target.checked)"
+                                            />
+                                        </td>
+                                        <td>
+                                            <div>{{ beeper.name }}</div>
+                                        </td>
+                                        <td>
+                                            <span :title="$t('beeper' + beeper.name)">{{
+                                                $t("beeper" + beeper.name)
+                                            }}</span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content_toolbar toolbar_fixed_bottom" style="position: fixed">
+            <div class="btn save_btn">
+                <a class="save" href="#" @click.prevent="saveConfig">{{ $t("configurationButtonSave") }}</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent, ref, reactive, onMounted, computed, nextTick, watch, onUnmounted } from "vue";
+import GUI from "../../js/gui";
+import FC from "../../js/fc";
+import MSP from "../../js/msp";
+import MSPCodes from "../../js/msp/MSPCodes";
+import { mspHelper } from "../../js/msp/MSPHelper.js";
+import { gui_log } from "../../js/gui_log";
+import { i18n } from "../../js/localization";
+import { sensorTypes } from "../../js/sensor_types"; // Import for dropdown lists
+import { have_sensor } from "../../js/sensor_helpers";
+import semver from "semver";
+import { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } from "../../js/data_storage";
+import { bit_check, bit_set, bit_clear } from "../../js/bit";
+import { updateTabList } from "../../js/utils/updateTabList";
+
+export default defineComponent({
+    name: "ConfigurationTab",
+    setup() {
+        // Reactive State
+        const pidAdvancedConfig = reactive({
+            pid_process_denom: 1,
+        });
+
+        const sensorConfig = reactive({
+            acc_hardware: 0,
+            baro_hardware: 0,
+            mag_hardware: 0,
+            sonar_hardware: 0,
+            opticalflow_hardware: 0,
+        });
+
+        const boardAlignment = reactive({
+            roll: 0,
+            pitch: 0,
+            yaw: 0,
+        });
+
+        const fpvCamAngleDegrees = ref(0);
+
+        const craftName = ref("");
+        const pilotName = ref("");
+        const showPilotName = ref(false);
+
+        const isSaving = ref(false);
+        const isMounted = ref(true);
+
+        onUnmounted(() => {
+            isMounted.value = false;
+        });
+
+        const armingConfig = reactive({
+            small_angle: 25,
+            gyro_cal_on_first_arm_bool: false,
+            auto_disarm_delay: 0,
+        });
+
+        const accelTrims = reactive({
+            roll: 0,
+            pitch: 0,
+        });
+
+        const sensorAlignment = reactive({
+            gyro_to_use: 0,
+            gyro_1_align: 0,
+            gyro_2_align: 0,
+            align_mag: 0,
+            mag_align_roll: 0,
+            mag_align_pitch: 0,
+            mag_align_yaw: 0,
+            gyro_1_align_roll: 0,
+            gyro_1_align_pitch: 0,
+            gyro_1_align_yaw: 0,
+            gyro_2_align_roll: 0,
+            gyro_2_align_pitch: 0,
+            gyro_2_align_yaw: 0,
+
+            gyro_align: [], // API 1.47+
+            gyro_enable_mask: 0, // API 1.47+
+            gyro_align_roll: [], // API 1.47+
+            gyro_align_pitch: [], // API 1.47+
+            gyro_align_yaw: [], // API 1.47+
+        });
+
+        const magDeclination = ref(0);
+        const showGyroCalOnFirstArm = ref(false);
+        const showAutoDisarmDelay = ref(false);
+        const hasSecondGyro = ref(false);
+        const hasDualGyros = ref(false);
+        const showMultiGyro = ref(false); // API 1.47+ multi-gyro UI
+
+        const gyroList = computed(() => {
+            if (!showMultiGyro.value || !sensorAlignment.gyro_align) return [];
+
+            // Assume 8 gyros possible (or match array length)
+            const gyros = [];
+            for (let i = 0; i < 8; i++) {
+                // If the array doesn't have data for this index, break or skip
+                // Ideally this array is populated with 8 elements in loadConfig
+                if (sensorAlignment.gyro_align[i] === undefined) continue;
+
+                gyros.push({
+                    index: i,
+                    enabled: bit_check(sensorAlignment.gyro_enable_mask, i),
+                    align: sensorAlignment.gyro_align[i],
+                    roll: sensorAlignment.gyro_align_roll[i],
+                    pitch: sensorAlignment.gyro_align_pitch[i],
+                    yaw: sensorAlignment.gyro_align_yaw[i],
+                });
+            }
+            return gyros;
+        });
+
+        const toggleGyro = (index, enabled) => {
+            if (enabled) {
+                sensorAlignment.gyro_enable_mask = bit_set(sensorAlignment.gyro_enable_mask, index);
+            } else {
+                sensorAlignment.gyro_enable_mask = bit_clear(sensorAlignment.gyro_enable_mask, index);
+            }
+        };
+
+        const updateGyroAlign = (index, value) => {
+            // Vue reactivity caveat with arrays:
+            // sensorAlignment.gyro_align[index] = value;
+            // Should verify if this triggers update, if not we might need to splice or recreate array
+            if (sensorAlignment.gyro_align) {
+                sensorAlignment.gyro_align[index] = value;
+            }
+        };
+
+        const showGyro1Align = ref(false);
+        const showGyro2Align = ref(false);
+        const showMagAlign = ref(false);
+        const showMagDeclination = ref(false);
+        const showRangefinder = ref(false);
+        const showGyroToUse = computed(() => {
+            return semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_47);
+        });
+        const showOpticalFlow = ref(false);
+
+        // This section contains gyro alignment dropdowns (API < 1.47) and mag alignment (API >= 1.47)
+        const showSensorAlignment = computed(() => {
+            // Show Active IMU box if:
+            // 1. Gyro selection is available (showGyroToUse)
+            // 2. OR Legacy Gyro Alignment is available (showGyro1/2Align)
+            // 3. OR (Implicitly) Custom Gyro Inputs are desired (we default to showing this box for Gyro configs)
+            return showGyroToUse.value || showGyro1Align.value || showGyro2Align.value;
+        });
+        const showOtherSensors = computed(() => {
+            return showMagDeclination.value || showRangefinder.value || showOpticalFlow.value;
+        });
+        const sonarTypesList = ref([]);
+        const opticalFlowTypesList = ref([]);
+        const sensorAlignments = ref([
+            "CW 0°",
+            "CW 90°",
+            "CW 180°",
+            "CW 270°",
+            "CW 0° flip",
+            "CW 90° flip",
+            "CW 180° flip",
+            "CW 270° flip",
+            i18n.getMessage("configurationSensorAlignmentCustom"),
+        ]);
+
+        // Features & Beepers State wrapper
+        const featuresList = computed(() => {
+            if (!FC.FEATURE_CONFIG?.features?._features) {
+                return [];
+            }
+            return FC.FEATURE_CONFIG.features._features.filter((feature) => feature.mode !== "select");
+        });
+
+        const beepersList = computed(() => {
+            if (!FC.BEEPER_CONFIG?.beepers?._beepers) {
+                return [];
+            }
+            return FC.BEEPER_CONFIG.beepers._beepers;
+        });
+
+        const dshotBeaconConditionsList = computed(() => {
+            if (!FC.BEEPER_CONFIG?.dshotBeaconConditions?._beepers) {
+                return [];
+            }
+            return FC.BEEPER_CONFIG.dshotBeaconConditions._beepers;
+        });
+
+        const dshotBeaconTone = ref(0); // 0 = disabled
+        const beeperDisabledMask = ref(0);
+        const dshotDisabledMask = ref(0);
+
+        const featureMask = computed(() => {
+            if (!FC?.FEATURE_CONFIG?.features) {
+                return 0;
+            }
+            return FC.FEATURE_CONFIG.features._featureMask;
+        });
+
+        // Methods for toggling bits
+        const isFeatureEnabled = (feature) => {
+            if (!FC.FEATURE_CONFIG?.features) {
+                return false;
+            }
+            return bit_check(FC.FEATURE_CONFIG.features._featureMask, feature.bit);
+        };
+
+        const toggleFeature = (feature, checked) => {
+            if (!FC.FEATURE_CONFIG?.features) {
+                return;
+            }
+            if (checked) {
+                FC.FEATURE_CONFIG.features._featureMask = bit_set(FC.FEATURE_CONFIG.features._featureMask, feature.bit);
+            } else {
+                FC.FEATURE_CONFIG.features._featureMask = bit_clear(
+                    FC.FEATURE_CONFIG.features._featureMask,
+                    feature.bit,
+                );
+            }
+            updateTabList(FC.FEATURE_CONFIG.features);
+        };
+
+        const isBeeperEnabled = (beeper) => {
+            if (!FC.BEEPER_CONFIG?.beepers) {
+                return false;
+            }
+            // Note: Beeper logic uses DisabledMask, so checked means NOT disabled
+            return !bit_check(beeperDisabledMask.value, beeper.bit);
+        };
+
+        const toggleBeeper = (beeper, checked) => {
+            if (!FC.BEEPER_CONFIG?.beepers) {
+                return;
+            }
+            if (checked) {
+                // To enable, we CLEAR the disabled bit
+                beeperDisabledMask.value = bit_clear(beeperDisabledMask.value, beeper.bit);
+            } else {
+                // To disable, we SET the disabled bit
+                beeperDisabledMask.value = bit_set(beeperDisabledMask.value, beeper.bit);
+            }
+            FC.BEEPER_CONFIG.beepers._beeperDisabledMask = beeperDisabledMask.value;
+        };
+
+        const enableAllBeepers = () => {
+            if (!FC.BEEPER_CONFIG?.beepers) {
+                return;
+            }
+            let mask = beeperDisabledMask.value;
+            beepersList.value.forEach((beeper) => {
+                if (beeper.visible !== false) {
+                    mask = bit_clear(mask, beeper.bit);
+                }
+            });
+            beeperDisabledMask.value = mask;
+            FC.BEEPER_CONFIG.beepers._beeperDisabledMask = mask;
+        };
+
+        const disableAllBeepers = () => {
+            if (!FC.BEEPER_CONFIG?.beepers) {
+                return;
+            }
+            let mask = beeperDisabledMask.value;
+            beepersList.value.forEach((beeper) => {
+                if (beeper.visible !== false) {
+                    mask = bit_set(mask, beeper.bit);
+                }
+            });
+            beeperDisabledMask.value = mask;
+            FC.BEEPER_CONFIG.beepers._beeperDisabledMask = mask;
+        };
+
+        const isDshotConditionEnabled = (cond) => {
+            if (!FC.BEEPER_CONFIG?.dshotBeaconConditions) {
+                return false;
+            }
+            // Same logic as beepers (DisabledMask)
+            return !bit_check(dshotDisabledMask.value, cond.bit);
+        };
+
+        const toggleDshotCondition = (cond, checked) => {
+            if (!FC.BEEPER_CONFIG?.dshotBeaconConditions) {
+                return;
+            }
+            if (checked) {
+                dshotDisabledMask.value = bit_clear(dshotDisabledMask.value, cond.bit);
+            } else {
+                dshotDisabledMask.value = bit_set(dshotDisabledMask.value, cond.bit);
+            }
+            FC.BEEPER_CONFIG.dshotBeaconConditions._beeperDisabledMask = dshotDisabledMask.value;
+        };
+
+        const enableAllDshot = () => {
+            if (!FC.BEEPER_CONFIG?.dshotBeaconConditions) {
+                return;
+            }
+            let mask = dshotDisabledMask.value;
+            dshotBeaconConditionsList.value.forEach((cond) => {
+                mask = bit_clear(mask, cond.bit);
+            });
+            dshotDisabledMask.value = mask;
+            FC.BEEPER_CONFIG.dshotBeaconConditions._beeperDisabledMask = mask;
+        };
+
+        const disableAllDshot = () => {
+            if (!FC.BEEPER_CONFIG?.dshotBeaconConditions) {
+                return;
+            }
+            let mask = dshotDisabledMask.value;
+            dshotBeaconConditionsList.value.forEach((cond) => {
+                mask = bit_set(mask, cond.bit);
+            });
+            dshotDisabledMask.value = mask;
+            FC.BEEPER_CONFIG.dshotBeaconConditions._beeperDisabledMask = mask;
+        };
+
+        // Computed Wrappers for Hardware Switches (logic inverted: 1 = disabled usually? legacy says: !== 1)
+        // Legacy: accHardwareSwitch.prop("checked", FC.SENSOR_CONFIG.acc_hardware !== 1);
+        // So 1 is None/Disabled?
+        const accHardwareEnabled = computed({
+            get: () => sensorConfig.acc_hardware !== 1,
+            set: (val) => {
+                sensorConfig.acc_hardware = val ? 0 : 1;
+            }, // Assuming 0 is Default/Auto
+        });
+
+        const baroHardwareEnabled = computed({
+            get: () => sensorConfig.baro_hardware !== 1,
+            set: (val) => {
+                sensorConfig.baro_hardware = val ? 0 : 1;
+            },
+        });
+
+        const magHardwareEnabled = computed({
+            get: () => sensorConfig.mag_hardware !== 1,
+            set: (val) => {
+                sensorConfig.mag_hardware = val ? 0 : 1;
+            },
+        });
+
+        const gyroFrequencyDisplay = ref("");
+        const pidDenomOptions = ref([]);
+
+        // Loading Logic
+        const loadConfig = async () => {
+            try {
+                if (!isMounted.value) return;
+                await Promise.resolve(); // Start chain
+                await MSP.promise(MSPCodes.MSP_FEATURE_CONFIG);
+                await MSP.promise(MSPCodes.MSP_BEEPER_CONFIG);
+                await MSP.promise(MSPCodes.MSP_BOARD_ALIGNMENT_CONFIG);
+                await MSP.promise(MSPCodes.MSP_ACC_TRIM);
+                await MSP.promise(MSPCodes.MSP_ARMING_CONFIG);
+                await MSP.promise(MSPCodes.MSP_RC_DEADBAND);
+                await MSP.promise(MSPCodes.MSP_SENSOR_CONFIG);
+                await MSP.promise(MSPCodes.MSP_SENSOR_ALIGNMENT);
+
+                if (!isMounted.value) return;
+
+                if (semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                    await MSP.promise(MSPCodes.MSP_NAME);
+                }
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                    await MSP.promise(
+                        MSPCodes.MSP2_GET_TEXT,
+                        mspHelper.crunch(MSPCodes.MSP2_GET_TEXT, MSPCodes.CRAFT_NAME),
+                    );
+                }
+
+                await MSP.promise(MSPCodes.MSP_RX_CONFIG);
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                    await MSP.promise(
+                        MSPCodes.MSP2_GET_TEXT,
+                        mspHelper.crunch(MSPCodes.MSP2_GET_TEXT, MSPCodes.PILOT_NAME),
+                    );
+                }
+
+                if (!isMounted.value) return;
+
+                await MSP.promise(MSPCodes.MSP_ADVANCED_CONFIG);
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    await MSP.promise(MSPCodes.MSP_COMPASS_CONFIG);
+                }
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    await MSP.promise(MSPCodes.MSP2_GYRO_SENSOR);
+                }
+
+                if (!isMounted.value) return;
+
+                initializeUI();
+                await nextTick();
+                GUI.switchery();
+                GUI.content_ready();
+            } catch (e) {
+                console.error("Failed to load configuration", e);
+                GUI.content_ready();
+            }
+        };
+
+        const initializeUI = () => {
+            // Populate Reactive State
+            pidAdvancedConfig.pid_process_denom = FC.PID_ADVANCED_CONFIG.pid_process_denom;
+
+            sensorConfig.acc_hardware = FC.SENSOR_CONFIG.acc_hardware;
+            sensorConfig.baro_hardware = FC.SENSOR_CONFIG.baro_hardware;
+            sensorConfig.mag_hardware = FC.SENSOR_CONFIG.mag_hardware;
+            sensorConfig.sonar_hardware = FC.SENSOR_CONFIG.sonar_hardware;
+            sensorConfig.opticalflow_hardware = FC.SENSOR_CONFIG.opticalflow_hardware;
+
+            boardAlignment.roll = FC.BOARD_ALIGNMENT_CONFIG.roll;
+            boardAlignment.pitch = FC.BOARD_ALIGNMENT_CONFIG.pitch;
+            boardAlignment.yaw = FC.BOARD_ALIGNMENT_CONFIG.yaw;
+
+            fpvCamAngleDegrees.value = FC.RX_CONFIG.fpvCamAngleDegrees;
+
+            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                craftName.value = FC.CONFIG.craftName;
+                pilotName.value = FC.CONFIG.pilotName;
+                showPilotName.value = true;
+            } else {
+                craftName.value = FC.CONFIG.name;
+                showPilotName.value = false;
+            }
+
+            // Gyro Frequency Logic
+            updateGyroDenom(FC.CONFIG.sampleRateHz);
+
+            updatePidDenomOptions();
+
+            // Load DShot Tone
+            if (FC.BEEPER_CONFIG) {
+                dshotBeaconTone.value = FC.BEEPER_CONFIG.dshotBeaconTone;
+                if (FC.BEEPER_CONFIG.beepers) {
+                    beeperDisabledMask.value = FC.BEEPER_CONFIG.beepers._beeperDisabledMask;
+                }
+                if (FC.BEEPER_CONFIG.dshotBeaconConditions) {
+                    dshotDisabledMask.value = FC.BEEPER_CONFIG.dshotBeaconConditions._beeperDisabledMask;
+                }
+            }
+
+            // Arming Config
+            armingConfig.small_angle = FC.ARMING_CONFIG.small_angle;
+
+            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                showGyroCalOnFirstArm.value = true;
+                armingConfig.gyro_cal_on_first_arm_bool = FC.ARMING_CONFIG.gyro_cal_on_first_arm === 1;
+                armingConfig.auto_disarm_delay = FC.ARMING_CONFIG.auto_disarm_delay;
+
+                if (isFeatureEnabled({ name: "MOTOR_STOP", bit: 4 })) {
+                    // Check manually or reuse logic
+                    showAutoDisarmDelay.value = true;
+                }
+            }
+
+            // Accel Trims
+            accelTrims.pitch = FC.CONFIG.accelerometerTrims[0];
+            accelTrims.roll = FC.CONFIG.accelerometerTrims[1];
+
+            // Sensor Alignment
+            sensorAlignment.gyro_to_use = FC.SENSOR_ALIGNMENT.gyro_to_use;
+            sensorAlignment.gyro_1_align = FC.SENSOR_ALIGNMENT.gyro_1_align;
+            sensorAlignment.gyro_2_align = FC.SENSOR_ALIGNMENT.gyro_2_align;
+            sensorAlignment.align_mag = FC.SENSOR_ALIGNMENT.align_mag;
+
+            sensorAlignment.gyro_1_align_roll = FC.SENSOR_ALIGNMENT.gyro_1_align_roll;
+            sensorAlignment.gyro_1_align_pitch = FC.SENSOR_ALIGNMENT.gyro_1_align_pitch;
+            sensorAlignment.gyro_1_align_yaw = FC.SENSOR_ALIGNMENT.gyro_1_align_yaw;
+            sensorAlignment.gyro_2_align_roll = FC.SENSOR_ALIGNMENT.gyro_2_align_roll;
+            sensorAlignment.gyro_2_align_pitch = FC.SENSOR_ALIGNMENT.gyro_2_align_pitch;
+            sensorAlignment.gyro_2_align_yaw = FC.SENSOR_ALIGNMENT.gyro_2_align_yaw;
+            sensorAlignment.gyro_align = FC.SENSOR_ALIGNMENT.gyro_align || [];
+            sensorAlignment.gyro_enable_mask = FC.SENSOR_ALIGNMENT.gyro_enable_mask || 0;
+            sensorAlignment.gyro_align_roll = FC.SENSOR_ALIGNMENT.gyro_align_roll || [];
+            sensorAlignment.gyro_align_pitch = FC.SENSOR_ALIGNMENT.gyro_align_pitch || [];
+            sensorAlignment.gyro_align_yaw = FC.SENSOR_ALIGNMENT.gyro_align_yaw || [];
+
+            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                sensorAlignment.mag_align_roll = FC.SENSOR_ALIGNMENT.mag_align_roll || 0;
+                sensorAlignment.mag_align_pitch = FC.SENSOR_ALIGNMENT.mag_align_pitch || 0;
+                sensorAlignment.mag_align_yaw = FC.SENSOR_ALIGNMENT.mag_align_yaw || 0;
+            }
+
+            // Detect Gyros
+            // Simplified detection logic compared to legacy for now, assume 1 unless flags say otherwise
+            const GYRO_DETECTION_FLAGS = {
+                DETECTED_GYRO_1: 1 << 0,
+                DETECTED_GYRO_2: 1 << 1,
+                DETECTED_DUAL_GYROS: 1 << 7,
+            };
+            const flags = FC.SENSOR_ALIGNMENT.gyro_detection_flags || 0;
+            hasSecondGyro.value = (flags & GYRO_DETECTION_FLAGS.DETECTED_GYRO_2) !== 0;
+            hasDualGyros.value = (flags & GYRO_DETECTION_FLAGS.DETECTED_DUAL_GYROS) !== 0;
+
+            // Gyro alignment dropdowns are only available for API < 1.47
+            // In API 1.47+, the firmware uses gyro_enable_mask instead of individual gyro alignments
+            // In API 1.47+, the firmware uses gyro_enable_mask instead of individual gyro alignments
+            if (semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                showGyro1Align.value = true;
+                showGyro2Align.value = hasSecondGyro.value;
+                showMultiGyro.value = false;
+            } else {
+                showGyro1Align.value = false;
+                showGyro2Align.value = false;
+                showMultiGyro.value = true;
+            }
+
+            // Mag Declination & Alignment
+            if (have_sensor(FC.CONFIG.activeSensors, "mag")) {
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    showMagDeclination.value = true;
+                    magDeclination.value = FC.COMPASS_CONFIG.mag_declination;
+                }
+                // Show mag alignment for API >= 1.47
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    showMagAlign.value = true;
+                }
+            } else {
+                showMagDeclination.value = false;
+                showMagAlign.value = false;
+            }
+
+            // Rangefinder / Optical Flow (API 1.47+)
+            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                const types = sensorTypes();
+                sonarTypesList.value = types.sonar.elements;
+                showRangefinder.value = sonarTypesList.value?.length > 0;
+
+                opticalFlowTypesList.value = types.opticalflow.elements;
+                showOpticalFlow.value = opticalFlowTypesList.value?.length > 0;
+            }
+        };
+
+        const updateGyroDenom = (gyroFrequency) => {
+            // Mirror legacy updateGyroDenomReadOnly
+            if (gyroFrequency === 0) {
+                gyroFrequencyDisplay.value = i18n.getMessage("configurationSpeedGyroNoGyro");
+            } else {
+                gyroFrequencyDisplay.value = i18n.getMessage("configurationKHzUnitLabel", {
+                    value: (gyroFrequency / 1000).toFixed(2),
+                });
+            }
+        };
+
+        const updatePidDenomOptions = () => {
+            // Mirror legacy logic
+            const pidBaseFreq = FC.CONFIG.sampleRateHz / 1000;
+            const MAX_DENOM = 8;
+            const options = [];
+
+            for (let denom = 1; denom <= MAX_DENOM; denom++) {
+                let text;
+                if (pidBaseFreq === 0) {
+                    text = i18n.getMessage("configurationSpeedPidNoGyro", { value: denom });
+                } else {
+                    text = i18n.getMessage("configurationKHzUnitLabel", {
+                        value: (pidBaseFreq / denom).toFixed(2),
+                    });
+                }
+                options.push({ value: denom, text });
+            }
+            pidDenomOptions.value = options;
+        };
+
+        const saveConfig = async () => {
+            if (isSaving.value) {
+                return;
+            }
+            isSaving.value = true;
+            try {
+                console.log("Saving configuration...");
+                gui_log("Saving...");
+
+                FC.PID_ADVANCED_CONFIG.pid_process_denom = pidAdvancedConfig.pid_process_denom;
+
+                FC.SENSOR_CONFIG.acc_hardware = sensorConfig.acc_hardware;
+                FC.SENSOR_CONFIG.baro_hardware = sensorConfig.baro_hardware;
+                FC.SENSOR_CONFIG.mag_hardware = sensorConfig.mag_hardware;
+
+                FC.BOARD_ALIGNMENT_CONFIG.roll = boardAlignment.roll;
+                FC.BOARD_ALIGNMENT_CONFIG.pitch = boardAlignment.pitch;
+                FC.BOARD_ALIGNMENT_CONFIG.yaw = boardAlignment.yaw;
+
+                FC.RX_CONFIG.fpvCamAngleDegrees = fpvCamAngleDegrees.value;
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                    FC.CONFIG.craftName = craftName.value;
+                    FC.CONFIG.pilotName = pilotName.value;
+                } else {
+                    FC.CONFIG.name = craftName.value;
+                }
+
+                if (FC.BEEPER_CONFIG) {
+                    FC.BEEPER_CONFIG.dshotBeaconTone = dshotBeaconTone.value;
+                }
+
+                FC.ARMING_CONFIG.small_angle = armingConfig.small_angle;
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    FC.ARMING_CONFIG.gyro_cal_on_first_arm = armingConfig.gyro_cal_on_first_arm_bool ? 1 : 0;
+                    FC.ARMING_CONFIG.auto_disarm_delay = armingConfig.auto_disarm_delay;
+                }
+
+                FC.CONFIG.accelerometerTrims[0] = accelTrims.pitch;
+                FC.CONFIG.accelerometerTrims[1] = accelTrims.roll;
+
+                FC.SENSOR_ALIGNMENT.gyro_to_use = sensorAlignment.gyro_to_use;
+                FC.SENSOR_ALIGNMENT.gyro_1_align = sensorAlignment.gyro_1_align;
+                FC.SENSOR_ALIGNMENT.gyro_2_align = sensorAlignment.gyro_2_align;
+                FC.SENSOR_ALIGNMENT.align_mag = sensorAlignment.align_mag;
+
+                if (semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    FC.SENSOR_ALIGNMENT.gyro_1_align_roll = sensorAlignment.gyro_1_align_roll;
+                    FC.SENSOR_ALIGNMENT.gyro_1_align_pitch = sensorAlignment.gyro_1_align_pitch;
+                    FC.SENSOR_ALIGNMENT.gyro_1_align_yaw = sensorAlignment.gyro_1_align_yaw;
+                    FC.SENSOR_ALIGNMENT.gyro_2_align_roll = sensorAlignment.gyro_2_align_roll;
+                    FC.SENSOR_ALIGNMENT.gyro_2_align_pitch = sensorAlignment.gyro_2_align_pitch;
+                    FC.SENSOR_ALIGNMENT.gyro_2_align_yaw = sensorAlignment.gyro_2_align_yaw;
+                } else {
+                    // API 1.47+ Multi-Gyro
+                    FC.SENSOR_ALIGNMENT.gyro_enable_mask = sensorAlignment.gyro_enable_mask;
+                    FC.SENSOR_ALIGNMENT.gyro_align = sensorAlignment.gyro_align;
+                    FC.SENSOR_ALIGNMENT.gyro_align_roll = sensorAlignment.gyro_align_roll;
+                    FC.SENSOR_ALIGNMENT.gyro_align_pitch = sensorAlignment.gyro_align_pitch;
+                    FC.SENSOR_ALIGNMENT.gyro_align_yaw = sensorAlignment.gyro_align_yaw;
+                }
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    FC.SENSOR_ALIGNMENT.mag_align_roll = sensorAlignment.mag_align_roll;
+                    FC.SENSOR_ALIGNMENT.mag_align_pitch = sensorAlignment.mag_align_pitch;
+                    FC.SENSOR_ALIGNMENT.mag_align_yaw = sensorAlignment.mag_align_yaw;
+                }
+
+                if (showMagDeclination.value) {
+                    FC.COMPASS_CONFIG.mag_declination = magDeclination.value;
+                }
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    FC.SENSOR_CONFIG.sonar_hardware = sensorConfig.sonar_hardware;
+                    FC.SENSOR_CONFIG.opticalflow_hardware = sensorConfig.opticalflow_hardware;
+                }
+
+                // Send MSP commands
+                await MSP.promise(MSPCodes.MSP_SET_FEATURE_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_FEATURE_CONFIG));
+
+                if (FC.BEEPER_CONFIG) {
+                    await MSP.promise(MSPCodes.MSP_SET_BEEPER_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_BEEPER_CONFIG));
+                }
+
+                await MSP.promise(
+                    MSPCodes.MSP_SET_BOARD_ALIGNMENT_CONFIG,
+                    mspHelper.crunch(MSPCodes.MSP_SET_BOARD_ALIGNMENT_CONFIG),
+                );
+                await MSP.promise(MSPCodes.MSP_SET_ACC_TRIM, mspHelper.crunch(MSPCodes.MSP_SET_ACC_TRIM));
+                await MSP.promise(MSPCodes.MSP_SET_ARMING_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_ARMING_CONFIG));
+                await MSP.promise(MSPCodes.MSP_SET_SENSOR_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_SENSOR_CONFIG));
+                await MSP.promise(
+                    MSPCodes.MSP_SET_SENSOR_ALIGNMENT,
+                    mspHelper.crunch(MSPCodes.MSP_SET_SENSOR_ALIGNMENT),
+                );
+
+                if (semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                    await MSP.promise(MSPCodes.MSP_SET_NAME, mspHelper.crunch(MSPCodes.MSP_SET_NAME));
+                } else {
+                    await MSP.promise(
+                        MSPCodes.MSP2_SET_TEXT,
+                        mspHelper.crunch(MSPCodes.MSP2_SET_TEXT, MSPCodes.CRAFT_NAME),
+                    );
+                    await MSP.promise(
+                        MSPCodes.MSP2_SET_TEXT,
+                        mspHelper.crunch(MSPCodes.MSP2_SET_TEXT, MSPCodes.PILOT_NAME),
+                    );
+                }
+
+                await MSP.promise(MSPCodes.MSP_SET_RX_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_RX_CONFIG));
+                await MSP.promise(MSPCodes.MSP_SET_ADVANCED_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_ADVANCED_CONFIG));
+
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    await MSP.promise(
+                        MSPCodes.MSP_SET_COMPASS_CONFIG,
+                        mspHelper.crunch(MSPCodes.MSP_SET_COMPASS_CONFIG),
+                    );
+                }
+
+                gui_log(i18n.getMessage("configurationSaved"));
+
+                // Save to EEPROM and Reboot
+                await new Promise((resolve) => {
+                    mspHelper.writeConfiguration(false, () => {
+                        GUI.tab_switch_cleanup(() => {
+                            GUI.reinitializeConnection();
+                            resolve();
+                        });
+                    });
+                });
+            } catch (e) {
+                console.error("Failed to save configuration", e);
+                gui_log(i18n.getMessage("configurationSaveFailed"));
+            } finally {
+                isSaving.value = false;
+            }
+        };
+
+        onMounted(() => {
+            loadConfig();
+        });
+
+        // Watch for beeper mask changes to reinitialize Switchery
+        watch([beeperDisabledMask, dshotDisabledMask, featureMask], async () => {
+            await nextTick();
+            GUI.switchery();
+        });
+
+        return {
+            pidAdvancedConfig,
+            sensorConfig,
+            accHardwareEnabled,
+            enableAllDshot,
+            disableAllDshot,
+            baroHardwareEnabled,
+            magHardwareEnabled,
+            gyroFrequencyDisplay,
+            pidDenomOptions,
+            boardAlignment,
+            fpvCamAngleDegrees,
+            craftName,
+            pilotName,
+            showPilotName,
+            featuresList,
+            beepersList,
+            dshotBeaconConditionsList,
+            dshotBeaconTone,
+            beeperDisabledMask,
+            dshotDisabledMask,
+            featureMask,
+            isFeatureEnabled,
+            toggleFeature,
+            isBeeperEnabled,
+            toggleBeeper,
+            enableAllBeepers,
+            disableAllBeepers,
+            isDshotConditionEnabled,
+            toggleDshotCondition,
+            armingConfig,
+            accelTrims,
+            sensorAlignment,
+            magDeclination,
+            showGyroCalOnFirstArm,
+            showAutoDisarmDelay,
+            hasSecondGyro,
+            hasDualGyros,
+            showGyro1Align,
+            showGyro2Align,
+            showMagAlign,
+            showSensorAlignment,
+            showOtherSensors,
+            showMagDeclination,
+            showRangefinder,
+            showOpticalFlow,
+            sonarTypesList,
+            showGyroToUse,
+            opticalFlowTypesList,
+            sensorAlignments,
+            showMultiGyro,
+            gyroList,
+            toggleGyro,
+            updateGyroAlign,
+            saveConfig,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+@import "../../css/tabs/configuration.less";
+</style>
diff --git a/src/css/tabs/configuration.less b/src/css/tabs/configuration.less
index 27a62dd8f73..aebdc895310 100644
--- a/src/css/tabs/configuration.less
+++ b/src/css/tabs/configuration.less
@@ -27,8 +27,12 @@
         gap: 0.5rem;
         .sensor_align_inputs {
             display: flex;
+            align-items: center;
             label {
                 white-space: nowrap;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
             }
         }
     }
@@ -75,8 +79,16 @@
         padding-right: 0;
     }
 
-    thead {
-        display: none;
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
     }
 
     .beeper-controls {
diff --git a/src/js/fc.js b/src/js/fc.js
index e761a5ec0de..1a906b69a8e 100644
--- a/src/js/fc.js
+++ b/src/js/fc.js
@@ -479,8 +479,20 @@ const FC = {
             align_mag: 0,
             gyro_detection_flags: 0,
             gyro_to_use: 0,
+
             gyro_1_align: 0,
             gyro_2_align: 0,
+            gyro_1_align_roll: 0,
+            gyro_1_align_pitch: 0,
+            gyro_1_align_yaw: 0,
+            gyro_2_align_roll: 0,
+            gyro_2_align_pitch: 0,
+            gyro_2_align_yaw: 0,
+            gyro_align: [], // API 1.47+
+            gyro_enable_mask: 0, // API 1.47+
+            gyro_align_roll: [], // API 1.47+
+            gyro_align_pitch: [], // API 1.47+
+            gyro_align_yaw: [], // API 1.47+
             mag_align_roll: 0,
             mag_align_pitch: 0,
             mag_align_yaw: 0,
diff --git a/src/js/gui.js b/src/js/gui.js
index e68cc5ef76f..83735863cb9 100644
--- a/src/js/gui.js
+++ b/src/js/gui.js
@@ -255,6 +255,7 @@ class GuiControl {
         const COLOR_SWITCHERY_SECOND = "var(--switcherysecond)";
 
         $(".togglesmall").each(function (index, elem) {
+            if ($(elem).next(".switchery").length) return;
             const switchery = new Switchery(elem, {
                 size: "small",
                 color: COLOR_ACCENT,
@@ -267,6 +268,7 @@ class GuiControl {
         });
 
         $(".toggle").each(function (index, elem) {
+            if ($(elem).next(".switchery").length) return;
             const switchery = new Switchery(elem, {
                 color: COLOR_ACCENT,
                 secondaryColor: COLOR_SWITCHERY_SECOND,
@@ -278,6 +280,7 @@ class GuiControl {
         });
 
         $(".togglemedium").each(function (index, elem) {
+            if ($(elem).next(".switchery").length) return;
             const switchery = new Switchery(elem, {
                 className: "switcherymid",
                 color: COLOR_ACCENT,
diff --git a/src/js/main.js b/src/js/main.js
index 847c2023c6b..306c65046dc 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -13,7 +13,7 @@ import CliAutoComplete from "./CliAutoComplete.js";
 import DarkTheme, { setDarkTheme } from "./DarkTheme.js";
 import { isExpertModeEnabled } from "./utils/isExpertModeEnabled.js";
 import { updateTabList } from "./utils/updateTabList.js";
-import { mountVueTab } from "./vue_tab_mounter.js";
+import { mountVueTab, unmountVueTab } from "./vue_tab_mounter.js";
 import * as THREE from "three";
 import NotificationManager from "./utils/notifications.js";
 
@@ -27,12 +27,6 @@ import("./msp/debug/msp_debug_tools.js")
         console.warn("Failed to load MSP debug tools:", err);
     });
 
-if (typeof String.prototype.replaceAll === "undefined") {
-    String.prototype.replaceAll = function (match, replace) {
-        return this.replace(new RegExp(match, "g"), () => replace);
-    };
-}
-
 $(document).ready(function () {
     appReady();
 });
@@ -215,6 +209,7 @@ function startProcess() {
 
                 // detach listeners and remove element data
                 const content = $("#content");
+                unmountVueTab();
                 content.empty();
 
                 // display loading screen
@@ -290,9 +285,7 @@ function startProcess() {
                         import("./tabs/setup_osd").then(({ setup_osd }) => setup_osd.initialize(content_ready));
                         break;
                     case "configuration":
-                        import("./tabs/configuration").then(({ configuration }) =>
-                            configuration.initialize(content_ready),
-                        );
+                        mountVueTab("configuration", content_ready);
                         break;
                     case "pid_tuning":
                         import("./tabs/pid_tuning").then(({ pid_tuning }) => pid_tuning.initialize(content_ready));
diff --git a/src/js/msp/MSPHelper.js b/src/js/msp/MSPHelper.js
index 0d442aa42d8..0e261938981 100644
--- a/src/js/msp/MSPHelper.js
+++ b/src/js/msp/MSPHelper.js
@@ -639,14 +639,42 @@ MspHelper.prototype.process_data = function (dataHandler) {
                     FC.SENSOR_ALIGNMENT.gyro_detection_flags = data.readU8();
 
                     if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-                        FC.SENSOR_ALIGNMENT.gyro_enable_mask = data.readU8(); // replacing gyro_to_use
-                        FC.SENSOR_ALIGNMENT.mag_align_roll = data.read16() / 10;
-                        FC.SENSOR_ALIGNMENT.mag_align_pitch = data.read16() / 10;
-                        FC.SENSOR_ALIGNMENT.mag_align_yaw = data.read16() / 10;
+                        FC.SENSOR_ALIGNMENT.gyro_enable_mask = data.readU8();
+
+                        // Initialize arrays
+                        FC.SENSOR_ALIGNMENT.gyro_align = [];
+                        FC.SENSOR_ALIGNMENT.gyro_align_roll = [];
+                        FC.SENSOR_ALIGNMENT.gyro_align_pitch = [];
+                        FC.SENSOR_ALIGNMENT.gyro_align_yaw = [];
+
+                        // Read 8 gyros
+                        for (let i = 0; i < 8; i++) {
+                            FC.SENSOR_ALIGNMENT.gyro_align.push(data.readU8());
+                            FC.SENSOR_ALIGNMENT.gyro_align_roll.push(data.read16() / 10);
+                            FC.SENSOR_ALIGNMENT.gyro_align_pitch.push(data.read16() / 10);
+                            FC.SENSOR_ALIGNMENT.gyro_align_yaw.push(data.read16() / 10);
+                        }
+
+                        // Read Mag alignment if data remains
+                        if (data.byteLength - data.offset >= 6) {
+                            FC.SENSOR_ALIGNMENT.mag_align_roll = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.mag_align_pitch = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.mag_align_yaw = data.read16() / 10;
+                        }
                     } else {
                         FC.SENSOR_ALIGNMENT.gyro_to_use = data.readU8();
                         FC.SENSOR_ALIGNMENT.gyro_1_align = data.readU8();
                         FC.SENSOR_ALIGNMENT.gyro_2_align = data.readU8();
+
+                        // Check if we have enough data for custom alignment values (2 gyros * 3 axes * 2 bytes = 12 bytes)
+                        if (data.byteLength - data.offset >= 12) {
+                            FC.SENSOR_ALIGNMENT.gyro_1_align_roll = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.gyro_1_align_pitch = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.gyro_1_align_yaw = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.gyro_2_align_roll = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.gyro_2_align_pitch = data.read16() / 10;
+                            FC.SENSOR_ALIGNMENT.gyro_2_align_yaw = data.read16() / 10;
+                        }
                     }
 
                     break;
@@ -2112,8 +2140,17 @@ MspHelper.prototype.crunch = function (code, modifierCode = undefined) {
                 .push8(FC.SENSOR_ALIGNMENT.align_mag);
 
             if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                buffer.push8(FC.SENSOR_ALIGNMENT.gyro_enable_mask);
+
+                for (let i = 0; i < 8; i++) {
+                    buffer
+                        .push8(FC.SENSOR_ALIGNMENT.gyro_align[i])
+                        .push16(FC.SENSOR_ALIGNMENT.gyro_align_roll[i] * 10)
+                        .push16(FC.SENSOR_ALIGNMENT.gyro_align_pitch[i] * 10)
+                        .push16(FC.SENSOR_ALIGNMENT.gyro_align_yaw[i] * 10);
+                }
+
                 buffer
-                    .push8(FC.SENSOR_ALIGNMENT.gyro_enable_mask) // replacing gyro_to_use
                     .push16(FC.SENSOR_ALIGNMENT.mag_align_roll * 10)
                     .push16(FC.SENSOR_ALIGNMENT.mag_align_pitch * 10)
                     .push16(FC.SENSOR_ALIGNMENT.mag_align_yaw * 10);
@@ -2121,7 +2158,13 @@ MspHelper.prototype.crunch = function (code, modifierCode = undefined) {
                 buffer
                     .push8(FC.SENSOR_ALIGNMENT.gyro_to_use)
                     .push8(FC.SENSOR_ALIGNMENT.gyro_1_align)
-                    .push8(FC.SENSOR_ALIGNMENT.gyro_2_align);
+                    .push8(FC.SENSOR_ALIGNMENT.gyro_2_align)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_1_align_roll * 10)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_1_align_pitch * 10)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_1_align_yaw * 10)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_2_align_roll * 10)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_2_align_pitch * 10)
+                    .push16(FC.SENSOR_ALIGNMENT.gyro_2_align_yaw * 10);
             }
 
             break;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 603ae772c27..33177031765 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -29,8 +29,12 @@ import { ispConnected } from "./utils/connection";
 
 const logHead = "[SERIAL-BACKEND]";
 
+export const REBOOT_CONNECT_MAX_TIME_MS = 60000;
+export const REBOOT_GRACE_PERIOD_MS = 1500;
+
 let mspHelper;
 let connectionTimestamp = null;
+let rebootTimestamp = 0;
 let liveDataRefreshTimerId = false;
 
 let isConnected = false;
@@ -63,7 +67,7 @@ export function initializeSerialBackend() {
                 PortHandler.portPicker.autoConnect &&
                 !isCliOnlyMode() &&
                 (connectionTimestamp === null || connectionTimestamp > 0)) ||
-            Date.now() - GUI.reboot_timestamp <= GUI.REBOOT_CONNECT_MAX_TIME_MS
+            Date.now() - rebootTimestamp <= REBOOT_CONNECT_MAX_TIME_MS
         ) {
             connectDisconnect();
         }
@@ -124,13 +128,6 @@ function connectDisconnect() {
                 return;
             }
 
-            // When rebooting, adhere to the auto-connect setting
-            const REBOOT_GRACE_PERIOD_MS = 2000;
-            if (!PortHandler.portPicker.autoConnect && Date.now() - GUI.reboot_timestamp < REBOOT_GRACE_PERIOD_MS) {
-                console.log(`${logHead} Rebooting, not connecting`);
-                return;
-            }
-
             const portName = selectedPort === "manual" ? PortHandler.portPicker.portOverride : selectedPort;
 
             console.log(`${logHead} Connecting to: ${portName}`);
@@ -605,7 +602,6 @@ function finishOpen() {
     onConnect();
 
     GUI.selectDefaultTabWhenConnected();
-    GUI.reboot_timestamp = 0;
 }
 
 function connectCli() {
@@ -787,3 +783,140 @@ function startLiveDataRefreshTimer() {
     clearLiveDataRefreshTimer();
     liveDataRefreshTimerId = setInterval(update_live_status, 250);
 }
+
+export function reinitializeConnection() {
+    if (CONFIGURATOR.virtualMode) {
+        connectDisconnect();
+        if (PortHandler.portPicker.autoConnect) {
+            return setTimeout(function () {
+                $("a.connection_button__link").trigger("click");
+            }, 500);
+        }
+    }
+
+    const currentPort = PortHandler.portPicker.selectedPort;
+
+    rebootTimestamp = Date.now();
+
+    // Send reboot command to the flight controller
+    MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false);
+
+    // Force connection invalid to ensure reboot dialog waits for reconnection
+    CONFIGURATOR.connectionValid = false;
+
+    if (currentPort.startsWith("bluetooth") || currentPort === "manual") {
+        if (!PortHandler.portPicker.autoConnect) {
+            return setTimeout(function () {
+                $("a.connection_button__link").trigger("click");
+            }, REBOOT_GRACE_PERIOD_MS);
+        }
+    }
+
+    // Show reboot progress modal
+    showRebootDialog();
+}
+
+function showRebootDialog() {
+    gui_log(i18n.getMessage("deviceRebooting"));
+
+    // Show reboot progress modal
+    const rebootDialog = document.getElementById("rebootProgressDialog") || createRebootProgressDialog();
+    rebootDialog.querySelector(".reboot-progress-bar").style.width = "0%";
+    rebootDialog.querySelector(".reboot-status").textContent = i18n.getMessage("rebootFlightController");
+    rebootDialog.showModal();
+
+    // Update progress during reboot
+    let progress = 0;
+    const progressInterval = setInterval(() => {
+        progress += 5;
+        if (progress <= 100) {
+            rebootDialog.querySelector(".reboot-progress-bar").style.width = `${progress}%`;
+        }
+    }, 100);
+
+    // Check for successful connection every 100ms with a timeout
+    const connectionCheckInterval = setInterval(() => {
+        const connectionCheckTimeoutReached = Date.now() - rebootTimestamp > REBOOT_CONNECT_MAX_TIME_MS;
+        const noSerialReconnect = !PortHandler.portPicker.autoConnect && PortHandler.portAvailable;
+
+        if (CONFIGURATOR.connectionValid || connectionCheckTimeoutReached || noSerialReconnect) {
+            clearInterval(connectionCheckInterval);
+            clearInterval(progressInterval);
+
+            rebootDialog.querySelector(".reboot-progress-bar").style.width = "100%";
+            rebootDialog.querySelector(".reboot-status").textContent = i18n.getMessage("rebootFlightControllerReady");
+
+            // Close the dialog after showing "ready" message briefly
+            setTimeout(() => {
+                rebootDialog.close();
+            }, 1000);
+
+            if (connectionCheckTimeoutReached) {
+                console.log(`${logHead} Reboot timeout reached`);
+            } else {
+                gui_log(i18n.getMessage("deviceReady"));
+            }
+        }
+    }, 100);
+
+    // Helper function to create the reboot dialog if it doesn't exist
+    function createRebootProgressDialog() {
+        const dialog = document.createElement("dialog");
+        dialog.id = "rebootProgressDialog";
+        dialog.className = "dialogReboot";
+
+        dialog.innerHTML = `
+            <div class="content">
+                <div class="reboot-status">${i18n.getMessage("rebootFlightController")}</div>
+                <div class="reboot-progress-container">
+                    <div class="reboot-progress-bar"></div>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(dialog);
+
+        // Add styles if not already defined
+        if (!document.getElementById("rebootProgressStyle")) {
+            const style = document.createElement("style");
+            style.id = "rebootProgressStyle";
+            style.textContent = `
+                .dialogReboot {
+                    border: 1px solid #3f4241;
+                    border-radius: 5px;
+                    background-color: #2d3233;
+                    color: #fff;
+                    padding: 20px;
+                    max-width: 400px;
+                }
+                .reboot-progress-container {
+                    width: 100%;
+                    background-color: #424546;
+                    border-radius: 3px;
+                    margin: 15px 0 5px;
+                    height: 10px;
+                }
+                .reboot-progress-bar {
+                    height: 100%;
+                    background-color: #ffbb00;
+                    border-radius: 3px;
+                    transition: width 0.1s ease-in-out;
+                    width: 0%;
+                }
+                .reboot-status {
+                    text-align: center;
+                    margin: 10px 0;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+
+        return dialog;
+    }
+}
+
+/**
+ * Re-initializes the connection, typically after a reboot or configuration change.
+ * Exposed as a public API for Vue components.
+ */
+GUI.reinitializeConnection = reinitializeConnection;
diff --git a/src/js/tabs/configuration.js b/src/js/tabs/configuration.js
deleted file mode 100644
index 3f938f04d52..00000000000
--- a/src/js/tabs/configuration.js
+++ /dev/null
@@ -1,710 +0,0 @@
-import semver from "semver";
-import { i18n } from "../localization";
-import GUI, { TABS } from "../gui";
-import { tracking } from "../Analytics";
-import { mspHelper } from "../msp/MSPHelper";
-import FC from "../fc";
-import MSP from "../msp";
-import MSPCodes from "../msp/MSPCodes";
-import { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } from "../data_storage";
-import { updateTabList } from "../utils/updateTabList";
-import $ from "jquery";
-import { have_sensor } from "../sensor_helpers";
-import { sensorTypes } from "../sensor_types";
-import { gui_log } from "../gui_log";
-
-const configuration = {
-    analyticsChanges: {},
-};
-
-const SENSOR_ALIGNMENTS = [
-    "CW 0°",
-    "CW 90°",
-    "CW 180°",
-    "CW 270°",
-    "CW 0° flip",
-    "CW 90° flip",
-    "CW 180° flip",
-    "CW 270° flip",
-    "Custom",
-];
-
-const MAX_GYROS = 8; // Maximum number of gyros supported
-
-configuration.initialize = function (callback) {
-    const self = this;
-
-    if (GUI.active_tab != "configuration") {
-        GUI.active_tab = "configuration";
-        GUI.configuration_loaded = true;
-    }
-
-    function load_serial_config() {
-        mspHelper.loadSerialConfig(load_config);
-    }
-
-    function load_config() {
-        Promise.resolve(true)
-            .then(() => MSP.promise(MSPCodes.MSP_FEATURE_CONFIG))
-            .then(() => MSP.promise(MSPCodes.MSP_BEEPER_CONFIG))
-            .then(() => MSP.promise(MSPCodes.MSP_BOARD_ALIGNMENT_CONFIG))
-            .then(() => MSP.promise(MSPCodes.MSP_ACC_TRIM))
-            .then(() => MSP.promise(MSPCodes.MSP_ARMING_CONFIG))
-            .then(() => MSP.promise(MSPCodes.MSP_RC_DEADBAND))
-            .then(() => MSP.promise(MSPCodes.MSP_SENSOR_CONFIG))
-            .then(() => MSP.promise(MSPCodes.MSP_SENSOR_ALIGNMENT))
-            .then(() =>
-                semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_45)
-                    ? MSP.promise(MSPCodes.MSP_NAME)
-                    : Promise.resolve(true),
-            )
-            .then(() =>
-                semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)
-                    ? MSP.promise(MSPCodes.MSP2_GET_TEXT, mspHelper.crunch(MSPCodes.MSP2_GET_TEXT, MSPCodes.CRAFT_NAME))
-                    : Promise.resolve(true),
-            )
-            .then(() => MSP.promise(MSPCodes.MSP_RX_CONFIG))
-            .then(() =>
-                semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)
-                    ? MSP.promise(MSPCodes.MSP2_GET_TEXT, mspHelper.crunch(MSPCodes.MSP2_GET_TEXT, MSPCodes.PILOT_NAME))
-                    : Promise.resolve(true),
-            )
-            .then(() => MSP.promise(MSPCodes.MSP_ADVANCED_CONFIG))
-            .then(() =>
-                semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46) && FC.checkBuildOption("USE_MAG")
-                    ? MSP.promise(MSPCodes.MSP_COMPASS_CONFIG)
-                    : Promise.resolve(true),
-            )
-            .then(() =>
-                semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)
-                    ? MSP.promise(MSPCodes.MSP2_GYRO_SENSOR)
-                    : Promise.resolve(true),
-            )
-            .then(() => load_html());
-    }
-
-    function load_html() {
-        $("#content").load("./tabs/configuration.html", process_html);
-    }
-
-    load_serial_config();
-
-    function process_html() {
-        self.analyticsChanges = {};
-
-        const features_e = $(".tab-configuration .features");
-
-        FC.FEATURE_CONFIG.features.generateElements(features_e);
-
-        // Dshot Beeper
-        const dshotBeeper_e = $(".tab-configuration .dshotbeeper");
-        const dshotBeeperBeaconTone = $("select.dshotBeeperBeaconTone");
-        const dshotBeaconCondition_e = $("tbody.dshotBeaconConditions");
-        const dshotBeaconSwitch_e = $("tr.dshotBeaconSwitch");
-
-        for (let i = 1; i <= 5; i++) {
-            dshotBeeperBeaconTone.append(`<option value="${i}">${i}</option>`);
-        }
-        dshotBeeper_e.show();
-
-        dshotBeeperBeaconTone.change(function () {
-            FC.BEEPER_CONFIG.dshotBeaconTone = dshotBeeperBeaconTone.val();
-        });
-
-        dshotBeeperBeaconTone.val(FC.BEEPER_CONFIG.dshotBeaconTone);
-
-        const template = $(".beepers .beeper-template");
-        dshotBeaconSwitch_e.hide();
-        FC.BEEPER_CONFIG.dshotBeaconConditions.generateElements(template, dshotBeaconCondition_e);
-
-        $("input.condition", dshotBeaconCondition_e).change(function () {
-            const element = $(this);
-            FC.BEEPER_CONFIG.dshotBeaconConditions.updateData(element);
-        });
-
-        // DShot Beeper toggle all buttons
-        $(".dshot-beeper-enable-all").click(function () {
-            $("input.condition", dshotBeaconCondition_e).each(function () {
-                $(this).prop("checked", true).trigger("change");
-            });
-        });
-
-        $(".dshot-beeper-disable-all").click(function () {
-            $("input.condition", dshotBeaconCondition_e).each(function () {
-                $(this).prop("checked", false).trigger("change");
-            });
-        });
-
-        // Analog Beeper
-        const destination = $(".beepers .beeper-configuration");
-        const beeper_e = $(".tab-configuration .beepers");
-
-        FC.BEEPER_CONFIG.beepers.generateElements(template, destination);
-
-        // translate to user-selected language
-        i18n.localizePage();
-
-        // Gyro and PID update
-        const gyroTextElement = $("input.gyroFrequency");
-        const gyroSelectElement = $("select.gyroSyncDenom");
-        const pidSelectElement = $("select.pidProcessDenom");
-
-        function addDenomOption(element, denom, baseFreq) {
-            let denomDescription;
-            if (baseFreq === 0) {
-                denomDescription = i18n.getMessage("configurationSpeedPidNoGyro", { value: denom });
-            } else {
-                denomDescription = i18n.getMessage("configurationKHzUnitLabel", {
-                    value: (baseFreq / denom).toFixed(2),
-                });
-            }
-            element.append(`<option value="${denom}">${denomDescription}</option>`);
-        }
-
-        const updateGyroDenomReadOnly = function (gyroFrequency) {
-            gyroSelectElement.hide();
-
-            let gyroContent;
-            if (gyroFrequency === 0) {
-                gyroContent = i18n.getMessage("configurationSpeedGyroNoGyro");
-            } else {
-                gyroContent = i18n.getMessage("configurationKHzUnitLabel", {
-                    value: (gyroFrequency / 1000).toFixed(2),
-                });
-            }
-            gyroTextElement.val(gyroContent);
-        };
-
-        $("div.gyroUse32kHz").hide();
-
-        updateGyroDenomReadOnly(FC.CONFIG.sampleRateHz);
-
-        gyroSelectElement.val(FC.PID_ADVANCED_CONFIG.gyro_sync_denom);
-
-        $(".systemconfigNote").html(i18n.getMessage("configurationLoopTimeHelp"));
-
-        gyroSelectElement
-            .change(function () {
-                const originalPidDenom = parseInt(pidSelectElement.val());
-                const pidBaseFreq = FC.CONFIG.sampleRateHz / 1000;
-                const MAX_DENOM = 8;
-
-                pidSelectElement.empty();
-
-                for (let denom = 1; denom <= MAX_DENOM; denom++) {
-                    addDenomOption(pidSelectElement, denom, pidBaseFreq);
-                }
-
-                pidSelectElement.val(originalPidDenom);
-            })
-            .change();
-
-        pidSelectElement.val(FC.PID_ADVANCED_CONFIG.pid_process_denom);
-
-        $('input[id="accHardwareSwitch"]').prop("checked", FC.SENSOR_CONFIG.acc_hardware !== 1);
-        $('input[id="baroHardwareSwitch"]').prop("checked", FC.SENSOR_CONFIG.baro_hardware !== 1);
-        $('input[id="magHardwareSwitch"]').prop("checked", FC.SENSOR_CONFIG.mag_hardware !== 1);
-
-        // Only show these sections for supported FW
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
-            $('input[name="craftName"]').val(FC.CONFIG.craftName);
-            $('input[name="pilotName"]').val(FC.CONFIG.pilotName);
-        } else {
-            $('input[name="craftName"]').val(FC.CONFIG.name);
-            $(".pilotName").hide();
-        }
-
-        $('input[name="fpvCamAngleDegrees"]').val(FC.RX_CONFIG.fpvCamAngleDegrees);
-
-        // fill board alignment
-        $('input[name="board_align_roll"]').val(FC.BOARD_ALIGNMENT_CONFIG.roll);
-        $('input[name="board_align_pitch"]').val(FC.BOARD_ALIGNMENT_CONFIG.pitch);
-        $('input[name="board_align_yaw"]').val(FC.BOARD_ALIGNMENT_CONFIG.yaw);
-
-        // fill accel trims
-        $('input[name="roll"]').val(FC.CONFIG.accelerometerTrims[1]);
-        $('input[name="pitch"]').val(FC.CONFIG.accelerometerTrims[0]);
-
-        $('input[id="configurationSmallAngle"]').val(FC.ARMING_CONFIG.small_angle);
-
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
-            $('input[id="configurationGyroCalOnFirstArm"]').prop(
-                "checked",
-                FC.ARMING_CONFIG.gyro_cal_on_first_arm === 1,
-            );
-
-            if (FC.FEATURE_CONFIG.features.isEnabled("MOTOR_STOP")) {
-                $('input[id="configurationAutoDisarmDelay"]').val(FC.ARMING_CONFIG.auto_disarm_delay);
-            } else {
-                $('input[id="configurationAutoDisarmDelay"]').parent().parent().hide();
-            }
-        } else {
-            $('input[id="configurationGyroCalOnFirstArm"]').parent().parent().hide();
-            $('input[id="configurationAutoDisarmDelay"]').parent().parent().hide();
-        }
-
-        // Multi gyro handling for newer firmware
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-            // Hide deprecated gyro_box
-            $(".tab-configuration .gyro_box").parent().hide();
-
-            // Define gyro detection flags
-            const GYRO_DETECTION_FLAGS = { DETECTED_DUAL_GYROS: 1 << 7 };
-            let gyroCount = 0;
-            // Determine how many gyros are detected (bit count)
-            for (let i = 0; i < MAX_GYROS; i++) {
-                GYRO_DETECTION_FLAGS[`DETECTED_GYRO_${i + 1}`] = 1 << i;
-                if ((FC.SENSOR_ALIGNMENT.gyro_detection_flags & (1 << i)) !== 0) {
-                    gyroCount++;
-                }
-            }
-
-            // Initialize gyro_enable_mask if needed
-            if (FC.SENSOR_ALIGNMENT.gyro_enable_mask === undefined) {
-                FC.SENSOR_ALIGNMENT.gyro_enable_mask = (1 << MAX_GYROS) - 1; // All enabled by default
-            } else if (FC.SENSOR_ALIGNMENT.gyro_enable_mask === 0) {
-                // Safety check: if somehow all gyros are disabled, enable the first one
-                FC.SENSOR_ALIGNMENT.gyro_enable_mask = 1;
-            }
-
-            if (gyroCount > 1) {
-                // Track which gyros are detected
-                const detected_gyros = [];
-
-                function createGyroBox(gyroIndex, container) {
-                    // Create a new gyro alignment div
-                    const gyroBox = $(`<div id="gyro_box_${gyroIndex + 1}"></div>`);
-                    const gyroRow = $(`<div class="gyro_row"></div>`);
-                    const gyroDetected = sensorTypes().gyro.elements[FC.GYRO_SENSOR.gyro_hardware[gyroIndex]];
-
-                    const enableCheck = $(`<div class="checkbox enable-checkbox">
-                        <label>
-                            <input type="checkbox" class="toggle" id="gyro_${gyroIndex + 1}_enable">
-                            <span> ${gyroDetected}</span>
-                        </label>
-                    </div>`);
-
-                    gyroRow.append(enableCheck);
-                    gyroBox.append(gyroRow);
-
-                    // Add the box to the container
-                    container.append(gyroBox);
-
-                    // Initialize the enable checkbox
-                    enableCheck
-                        .find("input")
-                        .prop("checked", (FC.SENSOR_ALIGNMENT.gyro_enable_mask & (1 << gyroIndex)) !== 0);
-
-                    // Add handler for enable/disable checkbox
-                    enableCheck.find("input").on("change", function () {
-                        const checked = $(this).is(":checked");
-
-                        if (checked) {
-                            // Enabling a gyro is always fine
-                            FC.SENSOR_ALIGNMENT.gyro_enable_mask |= 1 << gyroIndex;
-                        } else {
-                            // Safety check: prevent disabling all gyros
-                            const newMask = FC.SENSOR_ALIGNMENT.gyro_enable_mask & ~(1 << gyroIndex);
-                            if (newMask === 0) {
-                                // Prevent the action - keep the checkbox checked
-                                $(this).prop("checked", true);
-
-                                // Show an error message to the user
-                                gui_log(i18n.getMessage("configurationGyroRequiredWarning"));
-                                return;
-                            }
-
-                            // It's safe to disable this gyro
-                            FC.SENSOR_ALIGNMENT.gyro_enable_mask = newMask;
-                        }
-
-                        self.analyticsChanges[`Gyro${gyroIndex + 1}Enable`] = checked;
-                    });
-                }
-
-                // For each possible gyro
-                for (let i = 0; i < MAX_GYROS; i++) {
-                    detected_gyros[i] =
-                        (FC.SENSOR_ALIGNMENT.gyro_detection_flags & GYRO_DETECTION_FLAGS[`DETECTED_GYRO_${i + 1}`]) !=
-                        0;
-
-                    // If gyro is detected, create UI for it
-                    if (detected_gyros[i]) {
-                        createGyroBox(i, $(".tab-configuration .gyro_enable_configuration"));
-                    }
-                }
-
-                // Only show not found message if no gyros are detected
-                $(".gyro_notfound").toggle(!detected_gyros.some((detected) => detected));
-            } else {
-                // Hide the gyro container if not needed
-                $(".tab-configuration .gyro_enable_box").parent().hide();
-            }
-        } else {
-            // Hide the gyro enable box introduced in 1.47
-            $(".tab-configuration .gyro_enable_box").parent().hide();
-
-            // Original code for older firmware versions remains unchanged
-            const orientation_gyro_to_use_e = $("select.gyro_to_use");
-            const orientation_gyro_1_align_e = $("select.gyro_1_align");
-            const orientation_gyro_2_align_e = $("select.gyro_2_align");
-
-            const GYRO_DETECTION_FLAGS = {
-                DETECTED_GYRO_1: 1 << 0,
-                DETECTED_GYRO_2: 1 << 1,
-                DETECTED_DUAL_GYROS: 1 << 7,
-            };
-
-            const detected_gyro_1 =
-                (FC.SENSOR_ALIGNMENT.gyro_detection_flags & GYRO_DETECTION_FLAGS.DETECTED_GYRO_1) != 0;
-            const detected_gyro_2 =
-                (FC.SENSOR_ALIGNMENT.gyro_detection_flags & GYRO_DETECTION_FLAGS.DETECTED_GYRO_2) != 0;
-            const detected_dual_gyros =
-                (FC.SENSOR_ALIGNMENT.gyro_detection_flags & GYRO_DETECTION_FLAGS.DETECTED_DUAL_GYROS) != 0;
-
-            if (detected_gyro_1) {
-                orientation_gyro_to_use_e.append(
-                    `<option value="0">${i18n.getMessage("configurationSensorGyroToUseFirst")}</option>`,
-                );
-            }
-            if (detected_gyro_2) {
-                orientation_gyro_to_use_e.append(
-                    `<option value="1">${i18n.getMessage("configurationSensorGyroToUseSecond")}</option>`,
-                );
-            }
-            if (detected_dual_gyros) {
-                orientation_gyro_to_use_e.append(
-                    `<option value="2">${i18n.getMessage("configurationSensorGyroToUseBoth")}</option>`,
-                );
-            }
-
-            for (let i = 0; i < SENSOR_ALIGNMENTS.length; i++) {
-                orientation_gyro_1_align_e.append(`<option value="${i + 1}">${SENSOR_ALIGNMENTS[i]}</option>`);
-                orientation_gyro_2_align_e.append(`<option value="${i + 1}">${SENSOR_ALIGNMENTS[i]}</option>`);
-            }
-
-            orientation_gyro_to_use_e.val(FC.SENSOR_ALIGNMENT.gyro_to_use);
-            orientation_gyro_1_align_e.val(FC.SENSOR_ALIGNMENT.gyro_1_align);
-            orientation_gyro_2_align_e.val(FC.SENSOR_ALIGNMENT.gyro_2_align);
-
-            $(".gyro_alignment_inputs_first").toggle(detected_gyro_1);
-            $(".gyro_alignment_inputs_second").toggle(detected_gyro_2);
-            $(".gyro_alignment_inputs_selection").toggle(detected_gyro_1 || detected_gyro_2);
-            $(".gyro_alignment_inputs_notfound").toggle(!detected_gyro_1 && !detected_gyro_2);
-
-            // Keep original handlers
-            orientation_gyro_1_align_e.on("change", function () {
-                const value = parseInt($(this).val());
-
-                if (value !== FC.SENSOR_ALIGNMENT.gyro_1_align) {
-                    const newValue = $(this).find("option:selected").text();
-                    self.analyticsChanges["Gyro1Alignment"] = newValue;
-                }
-                FC.SENSOR_ALIGNMENT.gyro_1_align = value;
-            });
-
-            orientation_gyro_2_align_e.on("change", function () {
-                const value = parseInt($(this).val());
-
-                if (value !== FC.SENSOR_ALIGNMENT.gyro_2_align) {
-                    const newValue = $(this).find("option:selected").text();
-                    self.analyticsChanges["Gyro2Alignment"] = newValue;
-                }
-                FC.SENSOR_ALIGNMENT.gyro_2_align = value;
-            });
-        }
-
-        // Magnetometer
-        const orientation_mag_e = $("select.mag_align");
-
-        const hasMag =
-            have_sensor(FC.CONFIG.activeSensors, "mag") && semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46);
-
-        if (hasMag) {
-            $('input[name="mag_declination"]').val(FC.COMPASS_CONFIG.mag_declination.toFixed(1));
-        } else {
-            $("div.mag_declination").parent().parent().hide();
-        }
-
-        for (let i = 0; i < SENSOR_ALIGNMENTS.length; i++) {
-            orientation_mag_e.append(`<option value="${i + 1}">${SENSOR_ALIGNMENTS[i]}</option>`);
-        }
-
-        orientation_mag_e.val(FC.SENSOR_ALIGNMENT.align_mag);
-
-        function toggleMagCustomAlignmentInputs() {
-            // Toggle custom alignment visibility based on current value
-            const index = parseInt(orientation_mag_e.val()) - 1;
-            const isCustom = SENSOR_ALIGNMENTS[index] === "Custom";
-            $(".mag_align_inputs").toggle(isCustom);
-        }
-
-        orientation_mag_e.change(function () {
-            let value = parseInt($(this).val());
-
-            let newValue = undefined;
-            if (value !== FC.SENSOR_ALIGNMENT.align_mag) {
-                newValue = $(this).find("option:selected").text();
-            }
-            self.analyticsChanges["MagAlignment"] = newValue;
-
-            FC.SENSOR_ALIGNMENT.align_mag = value;
-
-            toggleMagCustomAlignmentInputs();
-        });
-
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-            $('input[name="mag_align_roll"]').val(FC.SENSOR_ALIGNMENT.mag_align_roll);
-            $('input[name="mag_align_pitch"]').val(FC.SENSOR_ALIGNMENT.mag_align_pitch);
-            $('input[name="mag_align_yaw"]').val(FC.SENSOR_ALIGNMENT.mag_align_yaw);
-
-            toggleMagCustomAlignmentInputs();
-        } else {
-            $(".tab-configuration .gyro_align_box").hide();
-            $(".tab-configuration .mag_align_box").hide();
-        }
-
-        // Range finder
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-            const rangeFinderType_e = $("select.rangefinderType");
-            const sonarElements = sensorTypes().sonar.elements;
-
-            for (let i = 0; i < sonarElements.length; i++) {
-                rangeFinderType_e.append(`<option value="${i}">${sonarElements[i]}</option>`);
-            }
-
-            rangeFinderType_e.val(FC.SENSOR_CONFIG.sonar_hardware);
-        } else {
-            $(".tab-configuration .rangefinder").parent().hide();
-        }
-
-        // Optical flow sensor
-        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-            const opticalflowType_e = $("select.opticalflowType");
-            const opticalflowElements = sensorTypes().opticalflow.elements;
-
-            for (let i = 0; i < opticalflowElements.length; i++) {
-                opticalflowType_e.append(`<option value="${i}">${opticalflowElements[i]}</option>`);
-            }
-
-            opticalflowType_e.val(FC.SENSOR_CONFIG.opticalflow_hardware);
-        } else {
-            $(".tab-configuration .opticalflow").parent().hide();
-        }
-
-        // UI hooks
-
-        $("input.feature", features_e).change(function () {
-            const element = $(this);
-
-            FC.FEATURE_CONFIG.features.updateData(element);
-            updateTabList(FC.FEATURE_CONFIG.features);
-        });
-
-        $('input[id="accHardwareSwitch"]')
-            .change(function () {
-                const checked = $(this).is(":checked");
-                $(".accelNeeded").toggle(checked);
-            })
-            .change();
-
-        $(features_e)
-            .filter("select")
-            .change(function () {
-                const element = $(this);
-
-                FC.FEATURE_CONFIG.features.updateData(element);
-                updateTabList(FC.FEATURE_CONFIG.features);
-            });
-
-        $("input.condition", beeper_e).change(function () {
-            const element = $(this);
-            FC.BEEPER_CONFIG.beepers.updateData(element);
-        });
-
-        // Analog Beeper toggle all buttons
-        $(".beeper-enable-all").click(function () {
-            $("input.condition", beeper_e).each(function () {
-                $(this).prop("checked", true).trigger("change");
-            });
-        });
-
-        $(".beeper-disable-all").click(function () {
-            $("input.condition", beeper_e).each(function () {
-                $(this).prop("checked", false).trigger("change");
-            });
-        });
-
-        function save_config() {
-            // Define all configuration operations to execute
-            const saveOperations = [
-                { code: MSPCodes.MSP_SET_FEATURE_CONFIG },
-                { code: MSPCodes.MSP_SET_BEEPER_CONFIG },
-                { code: MSPCodes.MSP_SET_BOARD_ALIGNMENT_CONFIG },
-                { code: MSPCodes.MSP_SET_RC_DEADBAND },
-                { code: MSPCodes.MSP_SET_SENSOR_ALIGNMENT },
-                { code: MSPCodes.MSP_SET_ADVANCED_CONFIG },
-                { code: MSPCodes.MSP_SET_ACC_TRIM },
-                { code: MSPCodes.MSP_SET_ARMING_CONFIG },
-                { code: MSPCodes.MSP_SET_SENSOR_CONFIG },
-                {
-                    condition: () => semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45),
-                    code: MSPCodes.MSP2_SET_TEXT,
-                    extraParams: MSPCodes.CRAFT_NAME,
-                    fallback: { code: MSPCodes.MSP_SET_NAME },
-                },
-                {
-                    condition: () => semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45),
-                    code: MSPCodes.MSP2_SET_TEXT,
-                    extraParams: MSPCodes.PILOT_NAME,
-                },
-                { code: MSPCodes.MSP_SET_RX_CONFIG },
-                {
-                    condition: () => semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46),
-                    code: MSPCodes.MSP_SET_COMPASS_CONFIG,
-                },
-            ];
-
-            // Start with a resolved promise
-            let saveChain = Promise.resolve(true);
-
-            // Build the promise chain
-            saveOperations.forEach((operation) => {
-                saveChain = saveChain.then(() => {
-                    // Skip if operation has a condition that returns false
-                    if (operation.condition && !operation.condition()) {
-                        if (operation.fallback) {
-                            // Use fallback operation if provided
-                            return MSP.promise(
-                                operation.fallback.code,
-                                operation.fallback.extraParams
-                                    ? mspHelper.crunch(operation.fallback.code, operation.fallback.extraParams)
-                                    : mspHelper.crunch(operation.fallback.code),
-                            );
-                        }
-                        return Promise.resolve(true);
-                    }
-
-                    // Execute the operation
-                    return MSP.promise(
-                        operation.code,
-                        operation.extraParams
-                            ? mspHelper.crunch(operation.code, operation.extraParams)
-                            : mspHelper.crunch(operation.code),
-                    );
-                });
-            });
-
-            // Complete the chain with final write
-            return saveChain.then(() => mspHelper.writeConfiguration(true));
-        }
-
-        $("a.save").on("click", function () {
-            // gather data that doesn't have automatic change event bound
-            FC.BOARD_ALIGNMENT_CONFIG.roll = parseInt($('input[name="board_align_roll"]').val());
-            FC.BOARD_ALIGNMENT_CONFIG.pitch = parseInt($('input[name="board_align_pitch"]').val());
-            FC.BOARD_ALIGNMENT_CONFIG.yaw = parseInt($('input[name="board_align_yaw"]').val());
-
-            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-                FC.SENSOR_ALIGNMENT.gyro_enable_mask = 0;
-
-                // Gather the enable/disable state for all gyros
-                for (let i = 0; i < MAX_GYROS; i++) {
-                    // Check if the checkbox is checked for this gyro
-                    if ($(`#gyro_${i + 1}_enable`).is(":checked")) {
-                        // Set the bit in the mask
-                        FC.SENSOR_ALIGNMENT.gyro_enable_mask |= 1 << i;
-                    }
-                    // If not checked, the bit stays 0 as we initialized the mask to 0
-                }
-
-                FC.SENSOR_ALIGNMENT.mag_align_roll = parseInt($('input[name="mag_align_roll"]').val());
-                FC.SENSOR_ALIGNMENT.mag_align_pitch = parseInt($('input[name="mag_align_pitch"]').val());
-                FC.SENSOR_ALIGNMENT.mag_align_yaw = parseInt($('input[name="mag_align_yaw"]').val());
-            } else {
-                FC.SENSOR_ALIGNMENT.gyro_1_align = parseInt($("select.gyro_1_align").val());
-                FC.SENSOR_ALIGNMENT.gyro_2_align = parseInt($("select.gyro_2_align").val());
-                FC.SENSOR_ALIGNMENT.gyro_to_use = parseInt($("select.gyro_to_use").val());
-            }
-
-            FC.CONFIG.accelerometerTrims[1] = parseInt($('input[name="roll"]').val());
-            FC.CONFIG.accelerometerTrims[0] = parseInt($('input[name="pitch"]').val());
-
-            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
-                FC.ARMING_CONFIG.gyro_cal_on_first_arm = $('input[id="configurationGyroCalOnFirstArm"]').is(":checked")
-                    ? 1
-                    : 0;
-                // only update auto_disarm_delay if MOTOR_STOP is enabled
-                if (FC.FEATURE_CONFIG.features.isEnabled("MOTOR_STOP")) {
-                    FC.ARMING_CONFIG.auto_disarm_delay = parseInt($('input[id="configurationAutoDisarmDelay"]').val());
-                }
-            }
-
-            // declination added first in #3676
-            if (hasMag) {
-                FC.COMPASS_CONFIG.mag_declination = $('input[name="mag_declination"]').val();
-            }
-
-            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-                FC.SENSOR_CONFIG.sonar_hardware = $("select.rangefinderType").val();
-                FC.SENSOR_CONFIG.opticalflow_hardware = $("select.opticalflowType").val();
-            }
-
-            FC.ARMING_CONFIG.small_angle = parseInt($('input[id="configurationSmallAngle"]').val());
-
-            FC.PID_ADVANCED_CONFIG.gyro_sync_denom = parseInt(gyroSelectElement.val());
-
-            const value = parseInt(pidSelectElement.val());
-
-            if (value !== FC.PID_ADVANCED_CONFIG.pid_process_denom) {
-                const newFrequency = pidSelectElement.find("option:selected").text();
-                self.analyticsChanges["PIDLoopSettings"] = `denominator: ${value} | frequency: ${newFrequency}`;
-            } else {
-                self.analyticsChanges["PIDLoopSettings"] = undefined;
-            }
-
-            FC.PID_ADVANCED_CONFIG.pid_process_denom = value;
-
-            FC.RX_CONFIG.fpvCamAngleDegrees = parseInt($('input[name="fpvCamAngleDegrees"]').val());
-
-            tracking.sendSaveAndChangeEvents(
-                tracking.EVENT_CATEGORIES.FLIGHT_CONTROLLER,
-                self.analyticsChanges,
-                "configuration",
-            );
-            self.analyticsChanges = {};
-
-            // fill some data
-            FC.SENSOR_CONFIG.acc_hardware = $('input[id="accHardwareSwitch"]').is(":checked") ? 0 : 1;
-            FC.SENSOR_CONFIG.baro_hardware = $('input[id="baroHardwareSwitch"]').is(":checked") ? 0 : 1;
-            FC.SENSOR_CONFIG.mag_hardware = $('input[id="magHardwareSwitch"]').is(":checked") ? 0 : 1;
-
-            if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
-                FC.CONFIG.craftName = $('input[name="craftName"]').val().trim();
-                FC.CONFIG.pilotName = $('input[name="pilotName"]').val().trim();
-            } else {
-                FC.CONFIG.name = $('input[name="craftName"]').val().trim();
-            }
-
-            mspHelper.sendSerialConfig(save_config);
-        });
-
-        // status data pulled via separate timer with static speed
-        GUI.interval_add(
-            "status_pull",
-            function () {
-                MSP.send_message(MSPCodes.MSP_STATUS);
-            },
-            250,
-            true,
-        );
-        GUI.content_ready(callback);
-    }
-};
-
-configuration.cleanup = function (callback) {
-    if (callback) callback();
-};
-
-TABS.configuration = configuration;
-export { configuration };
diff --git a/src/js/vue_components.js b/src/js/vue_components.js
index 16def8d66c3..39e4540e014 100644
--- a/src/js/vue_components.js
+++ b/src/js/vue_components.js
@@ -9,6 +9,7 @@ import LandingTab from "../components/tabs/LandingTab.vue";
 import OptionsTab from "../components/tabs/OptionsTab.vue";
 import PortsTab from "../components/tabs/PortsTab.vue";
 import ServosTab from "../components/tabs/ServosTab.vue";
+import ConfigurationTab from "../components/tabs/ConfigurationTab.vue";
 
 // Registry of Vue tab components - used by main.js for dynamic mounting
 export const VueTabComponents = {
@@ -17,6 +18,7 @@ export const VueTabComponents = {
     options: OptionsTab,
     ports: PortsTab,
     servos: ServosTab,
+    configuration: ConfigurationTab,
 };
 
 // Create a Vue plugin that registers all components globally
@@ -34,5 +36,6 @@ export const BetaflightComponents = {
         app.component("OptionsTab", OptionsTab);
         app.component("PortsTab", PortsTab);
         app.component("ServosTab", ServosTab);
+        app.component("ConfigurationTab", ConfigurationTab);
     },
 };
diff --git a/src/js/vue_tab_mounter.js b/src/js/vue_tab_mounter.js
index 3a70eeadff8..0dd6b5e3222 100644
--- a/src/js/vue_tab_mounter.js
+++ b/src/js/vue_tab_mounter.js
@@ -63,6 +63,9 @@ export function mountVueTab(tabName, contentReadyCallback) {
         currentTabApp.provide("betaflightModel", globalThis.vm);
     }
 
+    // Set active tab for legacy compatibility
+    GUI.active_tab = tabName;
+
     // Mount to content
     currentTabApp.mount(contentEl);
 
diff --git a/src/tabs/configuration.html b/src/tabs/configuration.html
deleted file mode 100644
index 2362cb8cddc..00000000000
--- a/src/tabs/configuration.html
+++ /dev/null
@@ -1,458 +0,0 @@
-<div class="tab-configuration">
-    <div class="content_wrapper">
-        <div class="tab_title" i18n="tabConfiguration"></div>
-        <div class="cf_doc_version_bt">
-            <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
-        </div>
-        <div class="note">
-            <p i18n="configurationFeaturesHelp"></p>
-        </div>
-
-        <div class="grid-row grid-box col2">
-
-            <div class="col-span-1">
-                <!-- SYSTEM CONFIGURATION -->
-                <div class="systemconfig">
-                    <div class="gui_box grey">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title" i18n="configurationSystem"></div>
-                        </div>
-                        <div class="spacer_box">
-                            <div class="note">
-                                <p class="systemconfigNote" i18n="configurationLoopTimeHelp"></p>
-                            </div>
-                            <div class="select">
-                                <input type="text" class="gyroFrequency" readonly />
-                                <select class="gyroSyncDenom">
-                                    <!-- list generated here -->
-                                </select>
-                                <span i18n="configurationGyroSyncDenom"></span>
-                            </div>
-                            <div class="select">
-                                <select class="pidProcessDenom">
-                                    <!-- list generated here -->
-                                </select>
-                                <span i18n="configurationPidProcessDenom"></span>
-                                <div class="helpicon cf_tip" i18n_title="configurationPidProcessDenomHelp"></div>
-                            </div>
-                            <div class="select">
-                                <div>
-                                    <input type="checkbox" id="accHardwareSwitch" class="toggle" />
-                                </div>
-                                <span class="freelabel" i18n="configurationAccHardware"></span>
-                            </div>
-                            <div class="select">
-                                <div>
-                                    <input type="checkbox" id="baroHardwareSwitch" class="toggle" />
-                                </div>
-                                <span class="freelabel" i18n="configurationBaroHardware"></span>
-                            </div>
-                            <div class="select">
-                                <div>
-                                    <input type="checkbox" id="magHardwareSwitch" class="toggle" />
-                                </div>
-                                <span class="freelabel" i18n="configurationMagHardware"></span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- END SYSTEM CONFIGURATION-->
-                <!-- PERSONALIZATION-->
-                <div class="gui_box grey miscSettings">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationPersonalization"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="number">
-                            <label> <input type="text" name="craftName" maxlength="16" style="width:100px;"/> <span
-                                i18n="craftName"></span>
-                            </label>
-                            <div class="helpicon cf_tip" i18n_title="configurationCraftNameHelp"></div>
-                        </div>
-                        <div class="number pilotName">
-                            <label> <input type="text" name="pilotName" maxlength="16" style="width:100px;"/> <span
-                                i18n="configurationPilotName"></span>
-                            </label>
-                            <div class="helpicon cf_tip" i18n_title="configurationPilotNameHelp"></div>
-                        </div>
-                    </div>
-                </div> <!-- END PERSONALIZATION-->
-                <!-- CAMERA -->
-                <div class="gui_box grey miscSettings accelNeeded">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationCamera"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="number fpvCamAngleDegrees">
-                            <label> <input type="number" name="fpvCamAngleDegrees" step="1" min="0" max="90" /> <span
-                                i18n="configurationFpvCamAngleDegrees"></span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-                <!-- END CAMERA -->
-                <!-- MAXIMUM ARMING ANGLE-->
-                <div class="gui_box grey accelNeeded">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationArming"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationArmingHelp"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="number">
-                            <label>
-                                <input type="number" id="configurationSmallAngle" step="1" min="1" max="180" />
-                                <span i18n="configurationSmallAngle"></span>
-                            </label>
-                            <div class="helpicon cf_tip" i18n_title="configurationSmallAngleHelp"></div>
-                        </div>
-                        <div class="number">
-                            <label>
-                                <input type="number" id="configurationAutoDisarmDelay" step="1" min="0" max="60" />
-                                <span i18n="configurationAutoDisarmDelay"></span>
-                            </label>
-                            <div class="helpicon cf_tip" i18n_title="configurationAutoDisarmDelayHelp"></div>
-                        </div>
-                        <div class="select">
-                            <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
-                                <input type="checkbox" id="configurationGyroCalOnFirstArm" class="toggle" />
-                            </div>
-                            <span class="freelabel" i18n="configurationGyroCalOnFirstArm"></span>
-                        </div>
-                    </div>
-                </div>
-                <!-- END MAXIMUM ARMING ANGLE-->
-                <!-- OTHER FEATURES -->
-                <div class="featuresOther">
-                    <div class="gui_box grey">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title" i18n="configurationFeatures"></div>
-                        </div>
-                        <div class="spacer_box">
-                            <div class="note">
-                                <p i18n="configurationOtherFeaturesHelp"></p>
-                            </div>
-                            <table class="featuresMultiple">
-                                <thead>
-                                    <tr>
-                                        <th i18n="configurationFeatureEnabled"></th>
-                                        <th i18n="configurationFeatureDescription"></th>
-                                        <th i18n="configurationFeatureName"></th>
-                                    </tr>
-                                </thead>
-                                <tbody class="features other" id="noline">
-                                    <!-- table generated here -->
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <!-- END OTHER FUTURES-->
-            </div> <!-- END grid-col col6 -->
-            <div class="col-span-1">
-                <!-- BOARD ORIENTATION -->
-                <div class="board acc">
-                    <!-- BOARD ALIGNMENT -->
-                    <div class="gui_box grey">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title" i18n="configurationBoardAlignment"></div>
-                            <div class="helpicon cf_tip" i18n_title="configurationBoardAlignmentHelp"></div>
-                        </div>
-                        <div class="spacer_box">
-                            <div class="sensor_align_content">
-                                <div class="sensor_align_inputs">
-                                    <div class="alignicon roll"></div>
-                                    <label>
-                                        <input type="number" name="board_align_roll" step="1" min="-180" max="360" />
-                                        <span i18n="configurationBoardAlignmentRoll"></span>
-                                    </label>
-                                </div>
-                                <div class="sensor_align_inputs">
-                                    <div class="alignicon pitch"></div>
-                                    <label>
-                                        <input type="number" name="board_align_pitch" step="1" min="-180" max="360" />
-                                        <span i18n="configurationBoardAlignmentPitch"></span>
-                                    </label>
-                                </div>
-                                <div class="sensor_align_inputs">
-                                    <div class="alignicon yaw"></div>
-                                    <label>
-                                        <input type="number" name="board_align_yaw" step="1" min="-180" max="360" />
-                                        <span i18n="configurationBoardAlignmentYaw"></span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- END BOARD ALIGNMENT -->
-
-                <!-- GYRO ALIGNMENT - DEPRECATED -->
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar gyro_box">
-                        <div class="spacer_box_title" i18n="configurationGyroAlignment"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationGyroAlignmentHelp"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="sensor_align_content">
-                            <div class="gyro_alignment_inputs gyro_alignment_inputs_selection">
-                                <label>
-                                    <select class="gyro_to_use">
-                                        <!-- list generated here -->
-                                    </select>
-                                    <span i18n="configurationSensorGyroToUse"></span>
-                                </label>
-                            </div>
-                            <div class="gyro_alignment_inputs gyro_alignment_inputs_first">
-                                <label>
-                                    <span>
-                                        <select class="gyro_1_align">
-                                            <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
-                                            <!-- list generated here -->
-                                        </select>
-                                        <span i18n="configurationSensorAlignmentGyro1"></span>
-                                    </span>
-                                </label>
-                            </div>
-                            <div class="gyro_alignment_inputs gyro_alignment_inputs_second">
-                                <label>
-                                    <select class="gyro_2_align">
-                                        <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
-                                        <!-- list generated here -->
-                                    </select>
-                                    <span i18n="configurationSensorAlignmentGyro2"></span>
-                                </label>
-                            </div>
-                            <div class="gyro_alignment_inputs gyro_alignment_inputs_notfound">
-                                <span class="message-negative" i18n="configurationSensorGyroToUseNotFound"></span>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-                <!-- END GYRO ALIGNMENT -->
-
-                <!-- GYRO ENABLE INTRODUCED 1.47 -->
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar gyro_enable_box">
-                        <div class="spacer_box_title" i18n="configurationGyroActiveIMU"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationGyroActiveIMUHelp"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <table>
-                            <tbody class="gyro_enable_configuration" id="noline">
-                                <!-- table generated here -->
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="gyro_notfound">
-                        <span class="message-negative" i18n="configurationSensorGyroToUseNotFound"></span>
-                    </div>
-                </div>
-                <!-- END GYRO ENABLE -->
-
-                <!-- MAGNETOMETER ALIGNMENT -->
-                <div class="gui_box grey mag_align_box">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationMagAlignment"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationBoardAlignmentHelp"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="select">
-                            <label>
-                                <select class="mag_align">
-                                    <option value="0" i18n="configurationSensorAlignmentDefaultOption"></option>
-                                    <!-- list generated here -->
-                                </select>
-                            </label>
-                        </div>
-                        <div class="sensor_align_content">
-                            <div class="mag_align_inputs sensor_align_inputs">
-                                <div class="alignicon roll"></div>
-                                <label>
-                                    <input type="number" name="mag_align_roll" step="1" min="-180" max="360" />
-                                    <span i18n="configurationMagAlignmentRoll"></span>
-                                </label>
-                            </div>
-                            <div class="mag_align_inputs sensor_align_inputs">
-                                <div class="alignicon pitch"></div>
-                                <label>
-                                    <input type="number" name="mag_align_pitch" step="1" min="-180" max="360" />
-                                    <span i18n="configurationMagAlignmentPitch"></span>
-                                </label>
-                            </div>
-                            <div class="mag_align_inputs sensor_align_inputs">
-                                <div class="alignicon yaw"></div>
-                                <label>
-                                    <input type="number" name="mag_align_yaw" step="1" min="-180" max="360" />
-                                    <span i18n="configurationMagAlignmentYaw"></span>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationMagAlignment"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationMagAlignmentHelp"></div>
-                    </div>
-                </div>
-                <!-- END MAGNETOMETER ALIGNMENT -->
-
-                <!-- MAGNETIC DECLINATION -->
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationMagDeclination"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationMagDeclinationHelp"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="number mag_declination">
-                            <label> <input type="number" name="mag_declination" step="0.1" min="-30.0" max="30.0" />
-                            <span i18n="configurationMagDeclinationInput"></span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-                <!-- END MAGNETIC DECLINATION -->
-
-                <!-- RANGEFINDER -->
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box title" i18n="configurationRangefinder"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationRangefinderHelp"></div>
-                    </div>
-                    <div class="spacer_box rangefinder">
-                        <div>
-                            <select class="rangefinderType">
-                                <!-- list generated here -->
-                            </select>
-                            <span i18n="configurationRangefinderType"></span>
-                        </div>
-                    </div>
-                </div>
-                <!-- END RANGEFINDER -->
-
-                <!-- OPTICALFLOW -->
-                <div class="gui_box grey">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box title" i18n="configurationOpticalflow"></div>
-                        <div class="helpicon cf_tip" i18n_title="configurationOpticalflowHelp"></div>
-                    </div>
-                    <div class="spacer_box opticalflow">
-                        <div>
-                            <select class="opticalflowType">
-                                <!-- list generated here -->
-                            </select>
-                            <span i18n="configurationOpticalflowType"></span>
-                        </div>
-                    </div>
-                </div>
-                <!-- END OPTICALFLOW -->
-
-                <!-- ACCELEROMETER TRIM -->
-                <div class="gui_box grey accelNeeded">
-                    <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="configurationAccelTrims"></div>
-                    </div>
-                    <div class="spacer_box">
-                        <div class="number">
-                            <label> <input type="number" name="roll" min="-300" max="300" /> <span
-                                i18n="configurationAccelTrimRoll"></span>
-                            </label>
-                        </div>
-                        <div class="number">
-                            <label> <input type="number" name="pitch" min="-300" max="300" /> <span
-                                i18n="configurationAccelTrimPitch"></span>
-                            </label>
-                        </div>
-                    </div>
-                </div> <!-- END ACCELEROMETER TRIM -->
-                <!-- DSHOT BEEPER -->
-                <div class="dshotBeeper">
-                    <div class="gui_box grey">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title" i18n="configurationDshotBeeper"></div>
-                            <div class="helpicon cf_tip" i18n_title="configurationDshotBeaconHelp"></div>
-                        </div>
-                        <div class="spacer_box">
-                            <table>
-                                <tbody class="dshot-beeper-configuration" id="noline">
-                                    <tr class="dshotBeaconSwitch">
-                                        <td>
-                                            <div class="number">
-                                                <div style="float: left; height: 20px; margin-right: 34px;">
-                                                    <input class="dshot-beeper toggle" id="dshotBeeperSwitch" type="checkbox" />
-                                                </div>
-                                                <span i18n="configurationUseDshotBeeper"></span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    <tr class="dshotbeacon">
-                                        <td>
-                                            <div class="select">
-                                                <div style="float: left; height: 20px; margin-right: 10px;">
-                                                    <select class="dshotBeeperBeaconTone">
-                                                        <option value="0" hidden></option>
-                                                        <!-- list generated here -->
-                                                    </select>
-                                                </div>
-                                                <span i18n="configurationDshotBeaconTone"></span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <div class="beeper-controls">
-                                <button type="button" class="btn dshot-beeper-enable-all" i18n="configurationBeeperEnableAll"></button>
-                                <button type="button" class="btn dshot-beeper-disable-all" i18n="configurationBeeperDisableAll"></button>
-                            </div>
-                            <table>
-                                <tbody class="dshotBeaconConditions" id="noline">
-                                    <!-- table generated here -->
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <div class="beepers">
-                    <!-- BEEPER -->
-                    <div class="beepers">
-                        <div class="gui_box grey">
-                            <div class="gui_box_titlebar">
-                                <div class="spacer_box_title" i18n="configurationBeeper"></div>
-                            </div>
-                            <div class="spacer_box">
-                                <div class="beeper-controls">
-                                    <button type="button" class="btn beeper-enable-all" i18n="configurationBeeperEnableAll"></button>
-                                    <button type="button" class="btn beeper-disable-all" i18n="configurationBeeperDisableAll"></button>
-                                </div>
-                                <table>
-                                    <tbody class="beeper-configuration" id="noline">
-                                        <tr class="beeper-template" style="display:none">
-                                            <td>
-                                                <input class="condition toggle" id="" name="" title="" type="checkbox" />
-                                            </td>
-                                            <td>
-                                                <div></div>
-                                                <span class="xs"></span>
-                                            </td>
-                                            <td>
-                                                <span class="sm-min"></span>
-                                            </td>
-                                        </tr>
-                                        <!-- table generated here -->
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-</div>
-
-<div class="content_toolbar toolbar_fixed_bottom">
-    <div class="btn save_btn">
-        <a class="save" href="#" i18n="configurationButtonSave"></a>
-    </div>
-</div>