diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 29b51eefa3d..44b70bf7a52 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -121,64 +121,43 @@ PortHandler.check_serial_devices = function () {
 
 PortHandler.check_usb_devices = function (callback) {
     const self = this;
-    const portSelect = document.querySelector('#port');
 
     chrome.usb.getDevices(usbDevices, function (result) {
-        const dfuActive = !!portSelect.value.startsWith('DFU');
 
+        const dfuElement = self.portPickerElement.children("[value='DFU']");
         if (result.length) {
             // Found device in DFU mode, add it to the list
-            if (!dfuActive) {
+            if (!dfuElement.length) {
                 self.clearOptions();
 
-                // self.portPickerElement.append($('<option/>', {
-                //     value: "DFU",
-                //     text: usbText,
-                //     /**
-                //      * @deprecated please avoid using `isDFU` and friends for new code.
-                //      */
-                //     data: {isDFU: true},
-                // }));
-
-                // self.portPickerElement.append($('<option/>', {
-                //     value: 'manual',
-                //     text: i18n.getMessage('portsSelectManual'),
-                //     /**
-                //      * @deprecated please avoid using `isDFU` and friends for new code.
-                //      */
-                //     data: {isManual: true},
-                // }));
-                const usbText = result[0].productName ? `DFU - ${result[0].productName}` : "DFU";
-                const dfuOption = document.createElement('option');
-
-                dfuOption.value = 'DFU';
-                dfuOption.text = usbText;
-
-                portSelect.add(dfuOption);
-                // portSelect.value = 'DFU';
-
-                self.setPortsInputWidth();
-
-                self.dfu_available = true;
-            }
-        } else {
-            // We are not in DFU mode anymore. Add items here as check_serial_devices() will not be called without a change in serial devices.
-            if (dfuActive) {
-                self.clearOptions();
+                let usbText;
+                const productName = result[0].productName;
+                if (productName) {
+                    usbText = (`DFU - ${productName}`);
+                } else {
+                    usbText = "DFU";
+                }
 
-                self.addManualOption();
-                self.addVirtualOption();
-                self.addNoPortsOption();
+                self.portPickerElement.append($("<option/>", {
+                    value: 'DFU',
+                    text: usbText,
+                    /**
+                     * @deprecated please avoid using `isDFU` and friends for new code.
+                     */
+                    data: {isDFU: true},
+                }));
 
                 self.setPortsInputWidth();
-
-                self.dfu_available = false;
+                self.dfu_available = true;
             }
+        } else if (dfuElement.length) {
+            // No device in DFU mode, remove it from the list
+            dfuElement.remove();
+            self.setPortsInputWidth();
+            self.dfu_available = false;
         }
 
-        // if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
-
-        if (!dfuActive) {
+        if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
             if (!(GUI.connected_to || GUI.connect_lock)) {
                 FC.resetState();
             }
@@ -209,13 +188,14 @@ PortHandler.addManualOption = function() {
     const self = this;
 
     if (self.showManualMode) {
-        const portSelect = document.querySelector('#port');
-        const manualOption = document.createElement('option');
-
-        manualOption.value = 'manual';
-        manualOption.text = i18n.getMessage('portsSelectManual');
-
-        portSelect.add(manualOption);
+        this.portPickerElement.append($("<option/>", {
+            value: 'manual',
+            text: i18n.getMessage('portsSelectManual'),
+            /**
+             * @deprecated please avoid using `isDFU` and friends for new code.
+             */
+            data: {isManual: true},
+        }));
     }
 };
 
@@ -223,13 +203,14 @@ PortHandler.addVirtualOption = function() {
     const self = this;
 
     if (self.showVirtualMode) {
-        const portSelect = document.querySelector('#port');
-        const virtualOption = document.createElement('option');
-
-        virtualOption.value = 'virtual';
-        virtualOption.text = i18n.getMessage('portsSelectVirtual');
-
-        portSelect.add(virtualOption);
+        this.portPickerElement.append($("<option/>", {
+            value: 'virtual',
+            text: i18n.getMessage('portsSelectVirtual'),
+            /**
+             * @deprecated please avoid using `isDFU` and friends for new code.
+             */
+            data: {isVirtual: true},
+        }));
     }
 };
 
@@ -350,49 +331,22 @@ PortHandler.sortPorts = function(ports) {
 };
 
 PortHandler.updatePortSelect = function (ports) {
-    const portSelect = document.querySelector('#port');
 
     ports = this.sortPorts(ports);
 
     this.clearOptions();
 
-    for (let i = 0; i < ports.length; i++) {
-        const portOption = document.createElement('option');
-        const portText = ports[i].displayName ? `${ports[i].path} - ${ports[i].displayName}` : ports[i].path;
-
-    //     this.portPickerElement.append($("<option/>", {
-    //         value: ports[i].path,
-    //         text: portText,
-    //         /**
-    //          * @deprecated please avoid using `isDFU` and friends for new code.
-    //          */
-    //         data: {isManual: false},
-    //     }));
-    // }
-
-    // if (this.showVirtualMode) {
-    //     this.portPickerElement.append($("<option/>", {
-    //         value: 'virtual',
-    //         text: i18n.getMessage('portsSelectVirtual'),
-    //         /**
-    //          * @deprecated please avoid using `isDFU` and friends for new code.
-    //          */
-    //         data: {isVirtual: true},
-    //     }));
-    // }
-
-    // this.portPickerElement.append($("<option/>", {
-    //     value: 'manual',
-    //     text: i18n.getMessage('portsSelectManual'),
-    //     /**
-    //      * @deprecated please avoid using `isDFU` and friends for new code.
-    //      */
-    //     data: {isManual: true},
-    // }));
-        portOption.value = ports[i].path;
-        portOption.text = portText;
-
-        portSelect.add(portOption);
+    for (const port of ports) {
+        const portText = port.displayName ? `${port.path} - ${port.displayName}` : port.path;
+
+        this.portPickerElement.append($("<option/>", {
+            value: port.path,
+            text: portText,
+            /**
+             * @deprecated please avoid using `isDFU` and friends for new code.
+             */
+            data: {isManual: false},
+        }));
     }
 
     this.addVirtualOption();
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index b69d5cee81e..872528541ef 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -56,23 +56,17 @@ export function initializeSerialBackend() {
         const selected_port = $('#port').val();
 
         if (selected_port === 'manual') {
-        // const portSelect = document.querySelector('#port');
-
-        // console.log(`Port select value: ${portSelect.value}`);
-        // if (portSelect.value.startsWith("manual")) {
             $('#port-override-option').show();
         } else {
             $('#port-override-option').hide();
         }
         if (selected_port === 'virtual') {
-        // if (portSelect.value.startsWith("virtual")) {
             $('#firmware-virtual-option').show();
         } else {
             $('#firmware-virtual-option').hide();
         }
 
         $('#auto-connect-and-baud').toggle(selected_port !== 'DFU');
-        // $('#auto-connect-and-baud').toggle(!portSelect.value.startsWith("DFU"));
     };
 
     GUI.updateManualPortVisibility();
@@ -96,16 +90,6 @@ export function initializeSerialBackend() {
         const selectedPort = $('#port').val();
         let portName;
         if (selectedPort === 'manual') {
-    // $("div.connect_controls a.connect").on('click', function (e) {
-    //     const portSelect = document.querySelector('#port');
-    //     let portName;
-
-    //     if (portSelect.value.startsWith('none')) {
-    //         e.preventDefault();
-    //         return;
-    //     }
-
-    //     if (portSelect.value.startsWith("manual")) {
             portName = $('#port-override').val();
         } else {
             portName = String($('div#port-picker #port').val());
@@ -120,12 +104,7 @@ export function initializeSerialBackend() {
             const selectedPort = $('#port').val();
 
             if (selectedPort === 'DFU') {
-
-            // const portSelect = document.querySelector('#port');
-
-            // if (portSelect.value.startsWith('DFU')) {
                 $('select#baud').hide();
-                e.preventDefault();
                 return;
             }
 
@@ -133,75 +112,48 @@ export function initializeSerialBackend() {
                 console.log(`Connecting to: ${portName}`);
                 GUI.connecting_to = portName;
 
-                    const baudRate = parseInt($('#baud').val());
-                    if (selectedPort === 'virtual') {
-                        CONFIGURATOR.virtualMode = true;
-                        CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown').val();
-
-                        // Hack to get virtual working on the web
-                        serial = serialShim();
-                        serial.connect('virtual', {}, onOpenVirtual);
-                    } else if (isWeb()) {
-                        CONFIGURATOR.virtualMode = false;
-                        serial = serialShim();
-                        // Explicitly disconnect the event listeners before attaching the new ones.
-                        serial.removeEventListener('connect', connectHandler);
-                        serial.addEventListener('connect', connectHandler);
-                // // lock port select & baud while we are connecting / connected
-                // $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true);
-                // $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
-                // const baudRate = document.querySelector('div#port-picker #baud').value;
-                // console.log(`Baud rate: ${baudRate}`);
-                // if (portSelect.value.startsWith('virtual')) {
-                //     CONFIGURATOR.virtualMode = true;
-                //     CONFIGURATOR.virtualApiVersion = document.querySelector('#firmware-version-dropdown').value;
-
-                //     serial.connect('virtual', {}, onOpenVirtual);
-                // } else if (isWeb()) {
-                //     // Explicitly disconnect the event listeners before attaching the new ones.
-                //     serial.removeEventListener('connect', connectHandler);
-                //     serial.addEventListener('connect', connectHandler);
+                // lock port select & baud while we are connecting / connected
+                $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true);
+                $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
+
+                const baudRate = parseInt($('#baud').val());
+                if (selectedPort === 'virtual') {
+                    CONFIGURATOR.virtualMode = true;
+                    CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown').val();
+
+                    // Hack to get virtual working on the web
+                    serial = serialShim();
+                    serial.connect('virtual', {}, onOpenVirtual);
+                } else if (isWeb()) {
+                    CONFIGURATOR.virtualMode = false;
+                    serial = serialShim();
+                    // Explicitly disconnect the event listeners before attaching the new ones.
+                    serial.removeEventListener('connect', connectHandler);
+                    serial.addEventListener('connect', connectHandler);
 
                     serial.removeEventListener('disconnect', disconnectHandler);
                     serial.addEventListener('disconnect', disconnectHandler);
 
                     serial.connect({ baudRate });
                 } else {
-                    if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
-                        $('div#flashbutton a.flash_state').removeClass('active');
-                        $('div#flashbutton a.flash').removeClass('active');
-                    }
-                    GUI.timeout_kill_all();
-                    GUI.interval_kill_all();
-                    GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
-
-                    function onFinishCallback() {
-                        finishClose(toggleStatus);
-                    }
-
-                    mspHelper?.setArmingEnabled(true, false, onFinishCallback);
-                    serial.connect(
-                        portName,
-                        { bitrate: selected_baud },
-                        onOpen,
-                    );
+                    serial.connect(portName, { bitrate: selected_baud }, onOpen);
                     toggleStatus();
                 }
 
-            // } else {
-            //     if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
-            //         $('div#flashbutton a.flash_state').removeClass('active');
-            //         $('div#flashbutton a.flash').removeClass('active');
-            //     }
-            //     GUI.timeout_kill_all();
-            //     GUI.interval_kill_all();
-            //     GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
+            } else {
+                if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
+                    $('div#flashbutton a.flash_state').removeClass('active');
+                    $('div#flashbutton a.flash').removeClass('active');
+                }
+                GUI.timeout_kill_all();
+                GUI.interval_kill_all();
+                GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
 
-            //     function onFinishCallback() {
-            //         finishClose(toggleStatus);
-            //     }
+                function onFinishCallback() {
+                    finishClose(toggleStatus);
+                }
 
-            //     mspHelper.setArmingEnabled(true, false, onFinishCallback);
+                mspHelper?.setArmingEnabled(true, false, onFinishCallback);
             }
         }
     });