diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 74f6ae8806..78f5960cdc 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -38,6 +38,7 @@ export default {
         selectedBaud: 115200,
         portOverride: "/dev/rfcomm0",
         virtualMspVersion: "1.46.0",
+        autoConnect: true,
       }),
     },
     connectedDevices: {
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index a0deb0f52f..f6909b7476 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -10,8 +10,7 @@
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
         :disabled="disabled"
-        @change="onChange"
-        @input="updateValue('selectedPort', $event.target.value)"
+        @change="onChangePort"
       >
         <option value="manual">
           {{ $t("portsSelectManual") }}
@@ -35,6 +34,19 @@
       </select>
     </div>
     <div id="auto-connect-and-baud">
+      <div id="auto-connect-switch">
+        <input
+          id="auto-connect"
+          class="auto_connect togglesmall"
+          type="checkbox"
+          :value="value.autoConnect"
+          :title="value.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
+          @change="onChangeAutoConnect"
+        >
+        <span class="auto_connect">
+          {{ $t("autoConnect") }}
+        </span>
+      </div>
       <div
         v-if="value.selectedPort !== 'virtual'"
         id="baudselect"
@@ -63,7 +75,7 @@
 </template>
 
 <script>
-import { get as getConfig } from '../../js/ConfigStorage';
+import { get as getConfig, set as setConfig } from '../../js/ConfigStorage';
 import { EventBus } from '../eventBus';
 
 export default {
@@ -73,6 +85,7 @@ export default {
       default: () => ({
         selectedPort: 'manual',
         selectedBauds: 115200,
+        autoConnect: true,
       }),
     },
     connectedDevices: {
@@ -80,9 +93,9 @@ export default {
       default: () => [],
     },
     disabled: {
-      type: Boolean,
-      default: false,
-    },
+        type: Boolean,
+        default: false,
+      },
   },
   data() {
       return {
@@ -120,15 +133,22 @@ export default {
         this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
       }
     },
-    onChange(event) {
+    onChangePort(event) {
       if (event.target.value === 'requestpermission') {
         EventBus.$emit('ports-input:request-permission');
       } else {
         EventBus.$emit('ports-input:change', event.target.value);
       }
+      this.updateValue('selectedPort', event.target.value);
+    },
+    onChangeAutoConnect(event) {
+      setConfig({'autoConnect': event.target.checked});
+      this.updateValue('autoConnect', event.target.checked);
+      return event;
     },
   },
 };
+
 </script>
 <style scoped>
 #portsinput {
@@ -203,6 +223,10 @@ export default {
 }
 #auto-connect-and-baud {
     float: right;
+
+    .auto_connect {
+      color: var(--subtleAccent);
+    }
 }
 
 #baudselect {
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 0ebcd0a5c5..c4b4a4d312 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -21,6 +21,7 @@ const PortHandler = new function () {
         selectedBauds: DEFAULT_BAUDS,
         portOverride: "/dev/rfcomm0",
         virtualMspVersion: "1.46.0",
+        autoConnect: getConfig('autoConnect').autoConnect,
     };
     this.portPickerDisabled = false;
     this.port_detected_callbacks = [];
@@ -75,9 +76,6 @@ PortHandler.check = function () {
         self.check_serial_devices();
     }
 
-
-    this.check_serial_devices();
-
 };
 
 PortHandler.check_serial_devices = function () {
@@ -106,7 +104,7 @@ PortHandler.check_serial_devices = function () {
         if (!self.initialPorts) {
             self.updatePortSelect(self.currentPorts);
             self.selectActivePort();
-            self.initialPorts = self.currentPorts;
+            self.initialPorts = {...self.currentPorts};
             GUI.updateManualPortVisibility();
         } else {
             self.removePort();
@@ -243,7 +241,7 @@ PortHandler.detectPort = function() {
         }
 
         // auto-connect if enabled
-        if (GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to && GUI.active_tab !== 'firmware_flasher') {
+        if (this.portPicker.autoConnect && !GUI.connecting_to && !GUI.connected_to && GUI.active_tab !== 'firmware_flasher') {
             // start connect procedure. We need firmware flasher protection over here
             $('div.connect_controls a.connect').click();
         }
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index a2c438662f..866fc15895 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -159,41 +159,19 @@ export function initializeSerialBackend() {
     });
 
     // auto-connect
-    const result = getConfig('auto_connect');
-    if (result.auto_connect === undefined || result.auto_connect) {
-        // default or enabled by user
-        GUI.auto_connect = true;
+    const result = PortHandler.portPicker.autoConnect;
+    if (result === undefined || result) {
 
         $('input.auto_connect').prop('checked', true);
         $('input.auto_connect, span.auto_connect').prop('title', i18n.getMessage('autoConnectEnabled'));
 
         $('select#baud').val(115200).prop('disabled', true);
     } else {
-        // disabled by user
-        GUI.auto_connect = false;
 
         $('input.auto_connect').prop('checked', false);
         $('input.auto_connect, span.auto_connect').prop('title', i18n.getMessage('autoConnectDisabled'));
     }
 
-    // bind UI hook to auto-connect checkbos
-    $('input.auto_connect').change(function () {
-        GUI.auto_connect = $(this).is(':checked');
-
-        // update title/tooltip
-        if (GUI.auto_connect) {
-            $('input.auto_connect, span.auto_connect').prop('title', i18n.getMessage('autoConnectEnabled'));
-
-            $('select#baud').val(115200).prop('disabled', true);
-        } else {
-            $('input.auto_connect, span.auto_connect').prop('title', i18n.getMessage('autoConnectDisabled'));
-
-            if (!GUI.connected_to && !GUI.connecting_to) $('select#baud').prop('disabled', false);
-        }
-
-        setConfig({'auto_connect': GUI.auto_connect});
-    });
-
     PortHandler.initialize();
     PortUsage.initialize();
 }
@@ -818,7 +796,7 @@ export function reinitializeConnection(callback) {
     // In virtual mode reconnect when autoconnect is enabled
     if (isVirtual) {
         return setTimeout(() => {
-            if (GUI.auto_connect) {
+            if (PortHandler.portPicker.autoConnect) {
                 $('a.connect').trigger('click');
             }
             if (typeof callback === 'function') {