diff --git a/locales/en/messages.json b/locales/en/messages.json
index a956439b537..d7aa9d6597b 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -62,6 +62,10 @@
         "message": "Virtual Mode (Experimental)",
         "description": "Configure a Virtual Flight Controller without the need of a physical FC."
     },
+    "portsSelectPermission": {
+        "message": "--- I can't find my device ---",
+        "description": "Option in the port selection dropdown to allow the user to give permissions to the system to access the device."
+    },
     "virtualMSPVersion": {
         "message": "Virtual Firmware Version"
     },
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index da1cb876781..70d69378c34 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -3,9 +3,11 @@ import FC from "./fc";
 import { i18n } from "./localization";
 import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
-import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";
 import { isWeb } from "./utils/isWeb";
+import { serialShim } from "./serial_shim.js";
+
+const serial = serialShim();
 
 const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
 
@@ -32,13 +34,7 @@ const PortHandler = new function () {
 PortHandler.initialize = function () {
     const self = this;
 
-    // currently web build doesn't need port handler,
-    // so just bail out.
-    if (isWeb()) {
-        return 'not implemented';
-    }
-
-    const portPickerElementSelector = "div#port-picker #port";
+    const portPickerElementSelector = "div#port-picker #port, div.web-port-picker #port";
     self.portPickerElement = $(portPickerElementSelector);
     self.selectList = document.querySelector(portPickerElementSelector);
     self.initialWidth = self.selectList.offsetWidth + 12;
@@ -79,15 +75,29 @@ PortHandler.check = function () {
         self.check_serial_devices();
     }
 
-    self.usbCheckLoop = setTimeout(() => {
-        self.check();
-    }, TIMEOUT_CHECK);
+    if (isWeb()) {
+        serial.addEventListener("addedDevice", (e) => {
+            this.check_serial_devices();
+        });
+
+        serial.addEventListener("removedDevice", (e) => {
+            this.check_serial_devices();
+        });
+
+        this.check_serial_devices();
+
+    } else {
+        self.usbCheckLoop = setTimeout(() => {
+            self.check();
+        }, TIMEOUT_CHECK);
+    }
+
 };
 
 PortHandler.check_serial_devices = function () {
     const self = this;
 
-    serial.getDevices(function(cp) {
+    const updatePorts = function(cp) {
         self.currentPorts = [];
 
         if (self.useMdnsBrowser) {
@@ -116,10 +126,21 @@ PortHandler.check_serial_devices = function () {
             self.removePort();
             self.detectPort();
         }
-    });
+    };
+
+    if (isWeb()) {
+        serial.getDevices().then(updatePorts);
+    } else {
+        serial.getDevices(updatePorts);
+    }
 };
 
 PortHandler.check_usb_devices = function (callback) {
+
+    if (isWeb()) {
+        return;
+    }
+
     const self = this;
 
     chrome.usb.getDevices(usbDevices, function (result) {
@@ -321,10 +342,35 @@ PortHandler.updatePortSelect = function (ports) {
         this.addNoPortSelection();
     }
 
+    if (isWeb()) {
+        const askpermission = 'askpermission';
+        this.portPickerElement.append($("<option/>", {
+            value: askpermission,
+            text: i18n.getMessage('portsSelectPermission'),
+            /**
+             * @deprecated please avoid using `isDFU` and friends for new code.
+             */
+            //data: {isShowPermission: true},
+        }));
+
+        this.portPickerElement.on("change", e => {
+            if (e.target.value === askpermission) {
+                this.askPermissionPort();
+            }
+            e.target.value = e.target.options[0].value;
+        });
+    }
+
     this.setPortsInputWidth();
     this.currentPorts = ports;
 };
 
+PortHandler.askPermissionPort = function() {
+    serial.requestPermissionDevice().then(() => {
+        this.check_serial_devices();
+    });
+}
+
 PortHandler.selectActivePort = function() {
     const ports = this.currentPorts;
     const OS = GUI.operating_system;
@@ -366,7 +412,7 @@ PortHandler.setPortsInputWidth = function() {
 
     width = (width > this.initialWidth) ? width : this.initialWidth;
 
-    const portsInput = document.querySelector("div#port-picker #portsinput");
+    const portsInput = document.querySelector("div#port-picker #portsinput, div.web-port-picker #portsinput");
     portsInput.style.width = `${width}px`;
 };
 
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index dc17175bce9..59a90c33724 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -73,7 +73,7 @@ export function initializeSerialBackend() {
         $('#port-override').val(data.portOverride);
     }
 
-    $('div#port-picker #port').change(function (target) {
+    $('div#port-picker #port, div.web-port-picker #port').change(function (target) {
         GUI.updateManualPortVisibility();
     });
 
@@ -85,7 +85,7 @@ export function initializeSerialBackend() {
         if (selectedPort === 'manual') {
             portName = $('#port-override').val();
         } else {
-            portName = String($('div#port-picker #port').val());
+            portName = String($('div.web-port-picker #port').val());
         }
 
         if (!GUI.connect_lock && selectedPort !== 'none') {
@@ -93,7 +93,7 @@ export function initializeSerialBackend() {
 
             GUI.configuration_loaded = false;
 
-            const selected_baud = parseInt($('div#port-picker #baud').val());
+            const selected_baud = parseInt($('div#port-picker #baud, div.web-port-picker #baud').val());
             const selectedPort = $('#port').val();
 
             if (selectedPort === 'DFU') {
@@ -106,7 +106,7 @@ export function initializeSerialBackend() {
                 GUI.connecting_to = portName;
 
                 // 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#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', true);
                 $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
 
                 const baudRate = parseInt($('#baud').val());
@@ -127,7 +127,7 @@ export function initializeSerialBackend() {
                     serial.removeEventListener('disconnect', disconnectHandler);
                     serial.addEventListener('disconnect', disconnectHandler);
 
-                    serial.connect({ baudRate });
+                    serial.connect(portName, { baudRate });
                 } else {
                     serial.connect(portName, { bitrate: selected_baud }, onOpen);
                     toggleStatus();
@@ -230,8 +230,8 @@ function finishClose(finishedCallback) {
     $('#dialogReportProblems-closebtn').click();
 
     // unlock port select & baud
-    $('div#port-picker #port').prop('disabled', false);
-    if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
+    $('div#port-picker #port, div.web-port-picker #port').prop('disabled', false);
+    if (!GUI.auto_connect) $('div#port-picker #baud, div.web-port-picker #baud').prop('disabled', false);
 
     // reset connect / disconnect button
     $('div.connect_controls a.connect').removeClass('active');
@@ -275,7 +275,7 @@ function abortConnection() {
     $('div#connectbutton a.connect').removeClass('active');
 
     // unlock port select & baud
-    $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', false);
+    $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', false);
 
     // reset data
     isConnected = false;
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 9d0317335e5..512ffa995e0 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -30,12 +30,22 @@ class WebSerial extends EventTarget {
 
         this.logHead = "SERIAL: ";
 
+        this.port_counter = 0;
+        this.ports = null;
         this.port = null;
         this.reader = null;
         this.writer = null;
         this.reading = false;
 
         this.connect = this.connect.bind(this);
+
+        navigator.serial.addEventListener("connect", device => {
+            this.dispatchEvent(new CustomEvent("addedDevice", { detail: device.target }));
+        });
+
+        navigator.serial.addEventListener("disconnect", device => {
+            this.dispatchEvent(new CustomEvent("removedDevice", { detail: device.target }));
+        });
     }
 
     handleReceiveBytes(info) {
@@ -47,13 +57,41 @@ class WebSerial extends EventTarget {
         this.removeEventListener('disconnect', this.handleDisconnect);
     }
 
-    async connect(options) {
-        this.openRequested = true;
-        this.port = await navigator.serial.requestPort({
+    async requestPermissionDevice() {
+        const permissionPort = await navigator.serial.requestPort({
+            filters: webSerialDevices,
+        });
+
+        return permissionPort;
+    }; 
+
+    async getDevices() {
+
+        const ports = await navigator.serial.getPorts({
             filters: webSerialDevices,
         });
 
+        this.port_counter = 0;
+        this.ports = ports.map(function (port, index) {
+            return {
+                path: `${this.port_counter++}`,
+                displayName: `Betaflight Flight Controller`,
+                vendorId: port.vendorId,
+                productId: port.productId,
+                port: port,
+            };
+        }, this);
+
+        return this.ports;
+    }
+
+    async connect(path, options) {
+        this.openRequested = true;
+
+        this.port = this.ports.find(device => device.path === path).port;
+
         await this.port.open(options);
+
         const connectionInfo = this.port.getInfo();
         this.connectionInfo = connectionInfo;
         this.writer = this.port.writable.getWriter();