diff --git a/gulpfile.js b/gulpfile.js
index 39e7a1d752..ebe8e3aab9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -403,6 +403,7 @@ function dist_rollup() {
                 // I will be picked up by rollup and bundled accordingly.
                 'js/main_cordova': 'src/js/main_cordova.js',
                 'js/utils/common': 'src/js/utils/common.js',
+                'js/jquery': 'src/js/jquery.js',
                 'js/main': 'src/js/main.js',
                 'js/tabs/receiver_msp': 'src/js/tabs/receiver_msp.js',
             },
@@ -437,8 +438,16 @@ function dist_rollup() {
                 sourcemap: true,
                 // put any 3rd party module in vendor.js
                 manualChunks(id) {
+                    /**
+                     * This splits every npm module loaded in into it's own package
+                     * to preserve the loading order. This is to prevent issues
+                     * where after bundling some modules are loaded in the wrong order.
+                     */
                     if (id.includes('node_modules')) {
-                        return 'vendor';
+                        const parts = id.split(/[\\/]/);
+                        const nodeModulesIndex = parts.indexOf('node_modules');
+                        const packageName = parts[nodeModulesIndex + 1];
+                        return packageName;
                     }
                 },
                 dir: DIST_DIR,
diff --git a/package.json b/package.json
index 3824630a6b..a509f623fe 100644
--- a/package.json
+++ b/package.json
@@ -63,10 +63,10 @@
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
     "jbox": "^1.3.3",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.3",
     "jquery-textcomplete": "^1.8.5",
     "jquery-touchswipe": "^1.6.19",
-    "jquery-ui-npm": "^1.12.0",
+    "jquery-ui": "^1.13.2",
     "jsdom": "^21.0.0",
     "lodash.debounce": "^4.0.8",
     "marked": "^4.1.1",
@@ -135,6 +135,9 @@
   "optionalDependencies": {
     "appdmg": "^0.6.4"
   },
+  "resolutions": {
+    "jquery": "3.6.3"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "yarn lint"
diff --git a/src/components/EscDshotDirection/EscDshotDirectionComponent.js b/src/components/EscDshotDirection/EscDshotDirectionComponent.js
index 30ee63681b..9d3db2f48f 100644
--- a/src/components/EscDshotDirection/EscDshotDirectionComponent.js
+++ b/src/components/EscDshotDirection/EscDshotDirectionComponent.js
@@ -6,6 +6,7 @@ import DshotCommand from "../../js/utils/DshotCommand.js";
 import FC from "../../js/fc.js";
 import { API_VERSION_1_44 } from '../../js/data_storage.js';
 import { getMixerImageSrc } from "../../js/utils/common.js";
+import $ from "jquery";
 
 class EscDshotDirectionComponent
 {
diff --git a/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js b/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js
index 0e6f322d0c..358954f614 100644
--- a/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js
+++ b/src/components/MotorOutputReordering/MotorOutputReorderingComponent.js
@@ -8,6 +8,7 @@ import FC from "../../js/fc";
 import { gui_log } from "../../js/gui_log";
 import { i18n } from "../../js/localization";
 import GUI, { TABS } from "../../js/gui";
+import $ from "jquery";
 
 export default class MotorOutputReorderComponent
 {
diff --git a/src/js/Analytics.js b/src/js/Analytics.js
index a36ca9af91..23bb2beec8 100644
--- a/src/js/Analytics.js
+++ b/src/js/Analytics.js
@@ -3,6 +3,7 @@ import googleAnalytics from 'universal-ga';
 import { set as setConfig, get as getConfig } from './ConfigStorage';
 import GUI from './gui';
 import CONFIGURATOR from './data_storage';
+import $ from 'jquery';
 
 let tracking = null;
 export { tracking };
diff --git a/src/js/Beepers.js b/src/js/Beepers.js
index 7dc2efce48..2571ef0dd9 100644
--- a/src/js/Beepers.js
+++ b/src/js/Beepers.js
@@ -1,4 +1,5 @@
 import { bit_check, bit_clear, bit_set } from './bit';
+import $ from 'jquery';
 
 class Beepers {
     constructor(config, supportedConditions) {
diff --git a/src/js/BuildApi.js b/src/js/BuildApi.js
index ba40d941d3..f8bf85e55a 100644
--- a/src/js/BuildApi.js
+++ b/src/js/BuildApi.js
@@ -1,6 +1,7 @@
 import { gui_log } from './gui_log';
 import { i18n } from "./localization";
 import { get as getStorage, set as setStorage } from "./SessionStorage";
+import $ from 'jquery';
 
 export default class BuildApi {
 
diff --git a/src/js/CliAutoComplete.js b/src/js/CliAutoComplete.js
index 34df69d02d..cd1205dc30 100644
--- a/src/js/CliAutoComplete.js
+++ b/src/js/CliAutoComplete.js
@@ -3,6 +3,7 @@ import CONFIGURATOR from './data_storage';
 import FC from './fc';
 import semver from 'semver';
 import { tracking } from './Analytics';
+import $ from 'jquery';
 
 /**
  * Encapsulates the AutoComplete logic
diff --git a/src/js/DarkTheme.js b/src/js/DarkTheme.js
index aeff8bdb46..400e3be8e9 100644
--- a/src/js/DarkTheme.js
+++ b/src/js/DarkTheme.js
@@ -1,6 +1,7 @@
 import GUI from "./gui";
 import windowWatcherUtil from "./utils/window_watchers";
 import { checkSetupAnalytics } from "./Analytics";
+import $ from 'jquery';
 
 const css_dark = [
     './css/dark-theme.css',
diff --git a/src/js/Features.js b/src/js/Features.js
index ee2011da25..28c738691b 100644
--- a/src/js/Features.js
+++ b/src/js/Features.js
@@ -2,6 +2,7 @@ import { bit_check, bit_set, bit_clear } from "./bit";
 import { API_VERSION_1_44, API_VERSION_1_45 } from './data_storage';
 import semver from "semver";
 import { tracking } from "./Analytics";
+import $ from 'jquery';
 
 const Features = function (config) {
     const self = this;
diff --git a/src/js/LogoManager.js b/src/js/LogoManager.js
index 27635101cb..36acf1e50e 100644
--- a/src/js/LogoManager.js
+++ b/src/js/LogoManager.js
@@ -1,6 +1,7 @@
 import { gui_log } from "./gui_log";
 import { i18n } from "./localization";
 import { checkChromeRuntimeError } from "./utils/common";
+import $ from 'jquery';
 
 /**
  * Takes an ImageData object and returns an MCM symbol as an array of strings.
diff --git a/src/js/TuningSliders.js b/src/js/TuningSliders.js
index d0821331fc..0606886292 100644
--- a/src/js/TuningSliders.js
+++ b/src/js/TuningSliders.js
@@ -6,6 +6,7 @@ import { isExpertModeEnabled } from "./utils/isExportModeEnabled";
 import semver from "semver";
 import { mspHelper } from "./msp/MSPHelper";
 import { TABS } from "./gui";
+import $ from 'jquery';
 
 const TuningSliders = {
     // Legacy Sliders
diff --git a/src/js/gui.js b/src/js/gui.js
index 2e063dfab0..50630c754d 100644
--- a/src/js/gui.js
+++ b/src/js/gui.js
@@ -3,6 +3,7 @@ import MSP from './msp';
 import Switchery from 'switchery-latest';
 import jBox from 'jbox';
 import { checkChromeRuntimeError } from './utils/common';
+import $ from 'jquery';
 
 const TABS = {};
 
@@ -316,7 +317,7 @@ class GuiControl {
         documentationButton.html("Wiki").attr("href", `https://betaflight.com/docs/wiki/configurator/${tRex}-tab`);
 
         // loading tooltip
-        jQuery(function () {
+        $(function () {
 
             new jBox('Tooltip', {
                 attach: '.cf_tip',
diff --git a/src/js/gui_log.js b/src/js/gui_log.js
index f45874aa86..eff3a0c3fc 100644
--- a/src/js/gui_log.js
+++ b/src/js/gui_log.js
@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 /**
  * log to GUI
  * @param {string} message message to log to GUI
diff --git a/src/js/jquery.js b/src/js/jquery.js
new file mode 100644
index 0000000000..9ab64b0009
--- /dev/null
+++ b/src/js/jquery.js
@@ -0,0 +1,26 @@
+import $ from 'jquery';
+
+/**
+ * jQuery has plugins which load in all sort of different ways,
+ * not necessary as modules. This binds jquery package to global
+ * scope and is loaded in first, so that when plugins are loaded
+ * all of them have access to the same instance.
+ */
+if(typeof globalThis !== 'undefined') {
+    // eslint-disable-next-line no-undef
+    globalThis.jQuery = $;
+    // eslint-disable-next-line no-undef
+    globalThis.$ = $;
+}
+
+if(typeof window !== 'undefined') {
+    window.jQuery = $;
+    window.$ = $;
+}
+
+if(typeof global !== 'undefined') {
+    global.$ = $;
+    global.jQuery = $;
+}
+
+export default $;
diff --git a/src/js/jqueryPlugins.js b/src/js/jqueryPlugins.js
new file mode 100644
index 0000000000..509a23c17a
--- /dev/null
+++ b/src/js/jqueryPlugins.js
@@ -0,0 +1,9 @@
+import './jquery';
+import 'jquery-ui/dist/jquery-ui';
+import 'jquery-textcomplete';
+import 'jquery-touchswipe';
+import select2 from 'select2';
+select2(jQuery);
+import 'multiple-select';
+import '../../libraries/jquery.nouislider.all.min.js';
+import '../../libraries/jquery.flightindicators.js';
diff --git a/src/js/localization.js b/src/js/localization.js
index 0cba8a0a36..34d24935a5 100644
--- a/src/js/localization.js
+++ b/src/js/localization.js
@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import i18nextXHRBackend from 'i18next-xhr-backend';
 import { gui_log } from './gui_log.js';
 import { get as getConfig, set as setConfig } from './ConfigStorage.js';
+import $ from "jquery";
 
 const i18n = {};
 /*
diff --git a/src/js/main.js b/src/js/main.js
index bf98dc9f07..445404d166 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,3 +1,5 @@
+import './jqueryPlugins';
+import $ from 'jquery';
 import 'jbox';
 import '../components/init.js';
 import { gui_log } from './gui_log.js';
diff --git a/src/js/main_cordova.js b/src/js/main_cordova.js
index 16a2634e7d..7977648249 100644
--- a/src/js/main_cordova.js
+++ b/src/js/main_cordova.js
@@ -1,4 +1,5 @@
 import { i18n } from "./localization.js";
+import $ from 'jquery';
 
 const REQUIRED_WEBVIEW_VERSION = 72;
 const WEBVIEW = {
diff --git a/src/js/msp/MSPConnector.js b/src/js/msp/MSPConnector.js
index 3f90e98a81..92b65a5ab4 100644
--- a/src/js/msp/MSPConnector.js
+++ b/src/js/msp/MSPConnector.js
@@ -9,6 +9,9 @@ import CONFIGURATOR from "../data_storage";
 import serial from "../serial";
 import { gui_log } from "../gui_log";
 
+/**
+ * This seems to be mainly used in firmware flasher parts.
+ */
 const MSPConnectorImpl = function () {
     this.baud = undefined;
     this.port = undefined;
diff --git a/src/js/msp/MSPHelper.js b/src/js/msp/MSPHelper.js
index 9e369c3dd6..b80b7594fb 100644
--- a/src/js/msp/MSPHelper.js
+++ b/src/js/msp/MSPHelper.js
@@ -1,3 +1,4 @@
+import '../injected_methods';
 import { update_dataflash_global } from "../update_dataflash_global";
 import { sensor_status } from "../sensor_helpers";
 import { bit_check, bit_set } from "../bit";
diff --git a/src/js/phones_ui.js b/src/js/phones_ui.js
index 08903c04b0..bfbe0b350b 100644
--- a/src/js/phones_ui.js
+++ b/src/js/phones_ui.js
@@ -1,4 +1,5 @@
 import GUI from "./gui";
+import $ from 'jquery';
 
 const UI_PHONES = {
     background: '#background',
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index bf4cae7d28..072086ca54 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -5,6 +5,7 @@ import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
 import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";
+import $ from 'jquery';
 
 const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
 
diff --git a/src/js/protocols/stm32.js b/src/js/protocols/stm32.js
index 2f252ce472..276b75546a 100644
--- a/src/js/protocols/stm32.js
+++ b/src/js/protocols/stm32.js
@@ -19,6 +19,7 @@ import { API_VERSION_1_42 } from "../data_storage";
 import serial from "../serial";
 import STM32DFU from "./stm32usbdfu";
 import semver from "semver";
+import $ from 'jquery';
 
 const STM32_protocol = function () {
     this.baud = null;
diff --git a/src/js/sensor_helpers.js b/src/js/sensor_helpers.js
index a4efe92619..c8b50cc74f 100644
--- a/src/js/sensor_helpers.js
+++ b/src/js/sensor_helpers.js
@@ -1,4 +1,5 @@
 import { bit_check } from './bit';
+import $ from 'jquery';
 
 export function have_sensor(sensors_detected, sensor_code) {
     switch(sensor_code) {
diff --git a/src/js/serial.js b/src/js/serial.js
index 4cd1f7fbf6..4827290b5b 100644
--- a/src/js/serial.js
+++ b/src/js/serial.js
@@ -6,6 +6,7 @@ import { gui_log } from "./gui_log";
 import inflection from "inflection";
 import PortHandler from "./port_handler";
 import { checkChromeRuntimeError } from "./utils/common";
+import $ from 'jquery';
 
 const serial = {
     connected:      false,
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index d15b0eb54b..ff6a8a673c 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -22,6 +22,7 @@ import { get as getConfig, set as setConfig } from "./ConfigStorage";
 import { tracking } from "./Analytics";
 import semver from 'semver';
 import CryptoES from "crypto-es";
+import $ from 'jquery';
 import BuildApi from "./BuildApi";
 
 let mspHelper;
diff --git a/src/js/tabs/adjustments.js b/src/js/tabs/adjustments.js
index 5de1e01dba..7248eca1d5 100644
--- a/src/js/tabs/adjustments.js
+++ b/src/js/tabs/adjustments.js
@@ -7,6 +7,7 @@ import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42 } from '../data_storage';
 import { gui_log } from '../gui_log';
 import semver from 'semver';
+import $ from 'jquery';
 
 const adjustments = {};
 
diff --git a/src/js/tabs/auxiliary.js b/src/js/tabs/auxiliary.js
index 3e2756ea78..fad41e5b09 100644
--- a/src/js/tabs/auxiliary.js
+++ b/src/js/tabs/auxiliary.js
@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import adjustBoxNameIfPeripheralWithModeID from '../peripherals';
 import { getTextWidth } from '../utils/common';
+import $ from 'jquery';
 import inflection from "inflection";
 
 const auxiliary = {};
diff --git a/src/js/tabs/cli.js b/src/js/tabs/cli.js
index 7d94fe5718..6fbd9d89b7 100644
--- a/src/js/tabs/cli.js
+++ b/src/js/tabs/cli.js
@@ -12,6 +12,7 @@ import UI_PHONES from "../phones_ui";
 import { gui_log } from "../gui_log";
 import jBox from "jbox";
 import { checkChromeRuntimeError } from "../utils/common";
+import $ from 'jquery';
 
 const cli = {
     lineDelayMs: 15,
diff --git a/src/js/tabs/configuration.js b/src/js/tabs/configuration.js
index 6b1335acd9..fb8ea8c248 100644
--- a/src/js/tabs/configuration.js
+++ b/src/js/tabs/configuration.js
@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_45 } from '../data_storage';
 import { updateTabList } from '../utils/updateTabList';
+import $ from 'jquery';
 
 const configuration = {
     analyticsChanges: {},
diff --git a/src/js/tabs/failsafe.js b/src/js/tabs/failsafe.js
index e1710b69d5..030e80dc4a 100644
--- a/src/js/tabs/failsafe.js
+++ b/src/js/tabs/failsafe.js
@@ -7,6 +7,7 @@ import MSPCodes from "../msp/MSPCodes";
 import adjustBoxNameIfPeripheralWithModeID from "../peripherals";
 import { API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import semver from 'semver';
+import $ from 'jquery';
 
 const failsafe = {};
 
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
index 38d673aea5..c0779047cf 100644
--- a/src/js/tabs/firmware_flasher.js
+++ b/src/js/tabs/firmware_flasher.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { i18n } from '../localization';
 import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
index bd0f3560be..1b36646482 100644
--- a/src/js/tabs/gps.js
+++ b/src/js/tabs/gps.js
@@ -5,6 +5,7 @@ import GUI, { TABS } from '../gui';
 import FC from '../fc';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
+import $ from 'jquery';
 import { have_sensor } from "../sensor_helpers";
 import { mspHelper } from '../msp/MSPHelper';
 import { updateTabList } from '../utils/updateTabList';
diff --git a/src/js/tabs/help.js b/src/js/tabs/help.js
index 3eccf883ab..ee93e5c275 100644
--- a/src/js/tabs/help.js
+++ b/src/js/tabs/help.js
@@ -1,5 +1,6 @@
 import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
+import $ from 'jquery';
 
 const help = {};
 help.initialize = function (callback) {
diff --git a/src/js/tabs/landing.js b/src/js/tabs/landing.js
index 89d163752c..f72d9630bb 100644
--- a/src/js/tabs/landing.js
+++ b/src/js/tabs/landing.js
@@ -1,5 +1,6 @@
 import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
+import $ from 'jquery';
 
 const landing = {};
 landing.initialize = function (callback) {
diff --git a/src/js/tabs/led_strip.js b/src/js/tabs/led_strip.js
index 4d2df99d94..aca38c19d0 100644
--- a/src/js/tabs/led_strip.js
+++ b/src/js/tabs/led_strip.js
@@ -5,6 +5,7 @@ import FC from "../fc";
 import semver from 'semver';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
+import $ from 'jquery';
 import { API_VERSION_1_46 } from '../data_storage';
 
 const led_strip = {
diff --git a/src/js/tabs/logging.js b/src/js/tabs/logging.js
index 9cb56fcd43..4c6517b82a 100644
--- a/src/js/tabs/logging.js
+++ b/src/js/tabs/logging.js
@@ -8,6 +8,7 @@ import MSP from '../msp.js';
 import MSPCodes from '../msp/MSPCodes.js';
 import CONFIGURATOR from '../data_storage.js';
 import { gui_log } from '../gui_log.js';
+import $ from 'jquery';
 
 const logging = {};
 logging.initialize = function (callback) {
diff --git a/src/js/tabs/motors.js b/src/js/tabs/motors.js
index 84c5143205..1950e4f880 100644
--- a/src/js/tabs/motors.js
+++ b/src/js/tabs/motors.js
@@ -18,6 +18,7 @@ import { updateTabList } from "../utils/updateTabList";
 import { isInt, getMixerImageSrc } from "../utils/common";
 import semver from 'semver';
 import * as d3 from 'd3';
+import $ from 'jquery';
 
 const motors = {
     previousDshotBidir: null,
diff --git a/src/js/tabs/onboard_logging.js b/src/js/tabs/onboard_logging.js
index f80d879aca..bec9a96b93 100644
--- a/src/js/tabs/onboard_logging.js
+++ b/src/js/tabs/onboard_logging.js
@@ -11,6 +11,7 @@ import { generateFilename } from "../utils/generate_filename";
 import semver from 'semver';
 import { showErrorDialog } from "../utils/showErrorDialog";
 import { checkChromeRuntimeError } from "../utils/common";
+import $ from 'jquery';
 
 let sdcardTimer;
 
diff --git a/src/js/tabs/options.js b/src/js/tabs/options.js
index b7e81850d9..1d5d081760 100644
--- a/src/js/tabs/options.js
+++ b/src/js/tabs/options.js
@@ -6,6 +6,7 @@ import CliAutoComplete from '../CliAutoComplete';
 import DarkTheme, { setDarkTheme } from '../DarkTheme';
 import { checkForConfiguratorUpdates } from '../utils/checkForConfiguratorUpdates';
 import { checkSetupAnalytics } from '../Analytics';
+import $ from 'jquery';
 import CONFIGURATOR from '../data_storage';
 
 const options = {};
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index e374fad07f..67ab4b03bf 100644
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -15,6 +15,7 @@ import jBox from "jbox";
 import inflection from "inflection";
 import { checkChromeRuntimeError } from "../utils/common";
 import debounce from "lodash.debounce";
+import $ from 'jquery';
 
 const FONT = {};
 const SYM = {};
diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js
index 41781d82d9..d974d61746 100644
--- a/src/js/tabs/pid_tuning.js
+++ b/src/js/tabs/pid_tuning.js
@@ -15,6 +15,7 @@ import { gui_log } from "../gui_log";
 import { degToRad, isInt } from "../utils/common";
 import semver from "semver";
 import * as THREE from "three";
+import $ from 'jquery';
 
 const pid_tuning = {
     RATE_PROFILE_MASK: 128,
diff --git a/src/js/tabs/ports.js b/src/js/tabs/ports.js
index 60924aadb0..139a18848a 100644
--- a/src/js/tabs/ports.js
+++ b/src/js/tabs/ports.js
@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_45 } from '../data_storage';
 import BOARD from '../boards';
+import $ from 'jquery';
 
 const ports = {
     analyticsChanges: {},
diff --git a/src/js/tabs/power.js b/src/js/tabs/power.js
index b19727d909..f64df534ed 100644
--- a/src/js/tabs/power.js
+++ b/src/js/tabs/power.js
@@ -6,6 +6,7 @@ import FC from '../fc';
 import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import jBox from 'jbox';
+import $ from 'jquery';
 
 const power = {
     supported: false,
diff --git a/src/js/tabs/receiver.js b/src/js/tabs/receiver.js
index ecdb2b4171..afa30ee60c 100644
--- a/src/js/tabs/receiver.js
+++ b/src/js/tabs/receiver.js
@@ -18,7 +18,7 @@ import semver from 'semver';
 import { updateTabList } from "../utils/updateTabList";
 import * as THREE from 'three';
 import * as d3 from "d3";
-
+import $ from 'jquery';
 import CryptoES from 'crypto-es';
 
 const receiver = {
diff --git a/src/js/tabs/receiver_msp.js b/src/js/tabs/receiver_msp.js
index b510a3d08c..f65b90f450 100644
--- a/src/js/tabs/receiver_msp.js
+++ b/src/js/tabs/receiver_msp.js
@@ -1,4 +1,5 @@
 import windowWatcherUtil from "../utils/window_watchers";
+import $ from 'jquery';
 
 const css_dark = [
     '/css/dark-theme.css',
diff --git a/src/js/tabs/sensors.js b/src/js/tabs/sensors.js
index 1637783e22..fb4123c851 100644
--- a/src/js/tabs/sensors.js
+++ b/src/js/tabs/sensors.js
@@ -7,6 +7,7 @@ import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import serial from "../serial";
 import * as d3 from 'd3';
+import $ from 'jquery';
 import semver from 'semver';
 import { API_VERSION_1_46 } from "../data_storage";
 
diff --git a/src/js/tabs/servos.js b/src/js/tabs/servos.js
index 880a9d23b6..e2d995bfc4 100644
--- a/src/js/tabs/servos.js
+++ b/src/js/tabs/servos.js
@@ -5,6 +5,7 @@ import FC from "../fc";
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import { gui_log } from "../gui_log";
+import $ from 'jquery';
 
 const servos = {};
 servos.initialize = function (callback) {
diff --git a/src/js/tabs/setup.js b/src/js/tabs/setup.js
index 340c099b40..0bb8526caa 100644
--- a/src/js/tabs/setup.js
+++ b/src/js/tabs/setup.js
@@ -11,6 +11,7 @@ import Model from '../model';
 import MSPCodes from '../msp/MSPCodes';
 import CONFIGURATOR, { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_46 } from '../data_storage';
 import { gui_log } from '../gui_log';
+import $ from 'jquery';
 
 const setup = {
     yaw_fix: 0.0,
diff --git a/src/js/tabs/setup_osd.js b/src/js/tabs/setup_osd.js
index bd9a47d9cd..7b838755b0 100644
--- a/src/js/tabs/setup_osd.js
+++ b/src/js/tabs/setup_osd.js
@@ -3,6 +3,7 @@ import GUI, { TABS } from '../gui';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import { gui_log } from "../gui_log";
+import $ from 'jquery';
 
 const setup_osd = {
 };
diff --git a/src/js/tabs/static_tab.js b/src/js/tabs/static_tab.js
index 27d8ffa10b..283604b2f2 100644
--- a/src/js/tabs/static_tab.js
+++ b/src/js/tabs/static_tab.js
@@ -1,5 +1,6 @@
 import { i18n } from '../localization';
 import GUI, { TABS } from '../gui';
+import $ from 'jquery';
 
 const staticTab = {};
 staticTab.initialize = function (staticTabName, callback) {
diff --git a/src/js/tabs/transponder.js b/src/js/tabs/transponder.js
index 073d18ce35..69f5c01ab2 100644
--- a/src/js/tabs/transponder.js
+++ b/src/js/tabs/transponder.js
@@ -5,6 +5,7 @@ import FC from "../fc";
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import { gui_log } from "../gui_log";
+import $ from 'jquery';
 
 const transponder = {
     available: false,
diff --git a/src/js/tabs/vtx.js b/src/js/tabs/vtx.js
index daf91d9654..38646e1d9d 100644
--- a/src/js/tabs/vtx.js
+++ b/src/js/tabs/vtx.js
@@ -14,6 +14,7 @@ import { API_VERSION_1_42, API_VERSION_1_44 } from '../data_storage';
 import UI_PHONES from "../phones_ui";
 import { gui_log } from "../gui_log";
 import { checkChromeRuntimeError } from "../utils/common";
+import $ from 'jquery';
 
 const vtx = {
     supported: false,
diff --git a/src/js/update_dataflash_global.js b/src/js/update_dataflash_global.js
index 293352ed31..090a4b5531 100644
--- a/src/js/update_dataflash_global.js
+++ b/src/js/update_dataflash_global.js
@@ -1,4 +1,5 @@
 import FC from "./fc";
+import $ from 'jquery';
 
 export function update_dataflash_global() {
     function formatFilesize(bytes) {
diff --git a/src/js/utils/checkForConfiguratorUpdates.js b/src/js/utils/checkForConfiguratorUpdates.js
index 43bb20b8ee..d54cf7ab65 100644
--- a/src/js/utils/checkForConfiguratorUpdates.js
+++ b/src/js/utils/checkForConfiguratorUpdates.js
@@ -3,6 +3,7 @@ import { get as getConfig } from "../ConfigStorage";
 import CONFIGURATOR from "../data_storage";
 import { i18n } from "../localization";
 import { gui_log } from "../gui_log";
+import $ from 'jquery';
 
 function notifyOutdatedVersion(data) {
 
diff --git a/src/js/utils/common.js b/src/js/utils/common.js
index 11e0ac7007..6cb4a1acd5 100644
--- a/src/js/utils/common.js
+++ b/src/js/utils/common.js
@@ -2,6 +2,7 @@ import semver from "semver";
 import { mixerList } from "../model";
 import CONFIGURATOR from "../data_storage";
 import { gui_log } from "../gui_log";
+import $ from "jquery";
 
 export function millitime() {
     return new Date().getTime();
diff --git a/src/js/utils/isExportModeEnabled.js b/src/js/utils/isExportModeEnabled.js
index 59a7ea65c8..43664754f5 100644
--- a/src/js/utils/isExportModeEnabled.js
+++ b/src/js/utils/isExportModeEnabled.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 export function isExpertModeEnabled() {
     return $('input[name="expertModeCheckbox"]').is(':checked');
 }
diff --git a/src/js/utils/showErrorDialog.js b/src/js/utils/showErrorDialog.js
index f33b7ea6b7..9b03b96b98 100644
--- a/src/js/utils/showErrorDialog.js
+++ b/src/js/utils/showErrorDialog.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 export function showErrorDialog(message) {
    const dialog = $('.dialogError')[0];
diff --git a/src/js/utils/updateTabList.js b/src/js/utils/updateTabList.js
index ca384bc4f3..14c9041ddc 100644
--- a/src/js/utils/updateTabList.js
+++ b/src/js/utils/updateTabList.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 export function updateTabList(features) {
     const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(':checked');
 
diff --git a/src/main.html b/src/main.html
index 78e55fe21e..47356cedf6 100644
--- a/src/main.html
+++ b/src/main.html
@@ -3,7 +3,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="author" content="cTn"/>
-    <link type="text/css" rel="stylesheet" href="./node_modules/jbox/dist/jBox.min.css"/>
+    <link type="text/css" rel="stylesheet" href="../node_modules/jbox/dist/jBox.min.css"/>
     <link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css"/>
     <link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css"/>
     <link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css"/>
@@ -53,18 +53,11 @@
 
     <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
 
+    <script type="module" src="./js/jquery.js"></script>
     <!-- TODO: probably won't need this here once everything is imported -->
     <script type="module" src="./js/utils/common.js"></script>
     <!-- CORDOVA_INCLUDE js/cordova_chromeapi.js -->
     <!-- CORDOVA_INCLUDE js/cordova_startup.js -->
-    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
-    <script type="text/javascript" src="./node_modules/select2/dist/js/select2.min.js"></script>
-    <script type="text/javascript" src="./node_modules/multiple-select/dist/multiple-select.min.js"></script>
     <script type="module" src="./js/main.js"></script>
 
     <title></title>
diff --git a/src/tabs/pid_tuning.html b/src/tabs/pid_tuning.html
index 6cbee4d269..a17d22a4c8 100644
--- a/src/tabs/pid_tuning.html
+++ b/src/tabs/pid_tuning.html
@@ -1199,7 +1199,7 @@
                 </div>
 
                 <!-- Filter Slider -->
-                <div id="slidersFilterBox"class="gui_box grey topspacer tuningFilterSliders">
+                <div id="slidersFilterBox" class="gui_box grey topspacer tuningFilterSliders">
                     <table class="pid_titlebar">
                         <tr>
                             <th scope="col" class="sm-min"></th>
diff --git a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js
index c657096002..35e70ca196 100644
--- a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js
+++ b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js
@@ -5,6 +5,7 @@ import PresetTitlePanel from "../TitlePanel/PresetTitlePanel";
 import FC from "../../../js/fc";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
+import $ from 'jquery';
 
 export default class PresetsDetailedDialog {
     constructor(domDialog, pickedPresetList, onPresetPickedCallback, favoritePresets) {
diff --git a/src/tabs/presets/SourcesDialog/SourcePanel.js b/src/tabs/presets/SourcesDialog/SourcePanel.js
index 273a62d97e..7bf118694d 100644
--- a/src/tabs/presets/SourcesDialog/SourcePanel.js
+++ b/src/tabs/presets/SourcesDialog/SourcePanel.js
@@ -1,6 +1,7 @@
 import { i18n } from "../../../js/localization";
 import GUI from "../../../js/gui";
 import PresetSource from "./PresetSource";
+import $ from 'jquery';
 
 export default class SourcePanel {
     constructor(parentDiv, presetSource) {
diff --git a/src/tabs/presets/SourcesDialog/SourcesDialog.js b/src/tabs/presets/SourcesDialog/SourcesDialog.js
index 671b484636..53e7f20404 100644
--- a/src/tabs/presets/SourcesDialog/SourcesDialog.js
+++ b/src/tabs/presets/SourcesDialog/SourcesDialog.js
@@ -2,6 +2,7 @@ import { i18n } from "../../../js/localization";
 import { get as getConfig, set as setConfig } from "../../../js/ConfigStorage";
 import PresetSource from "./PresetSource";
 import SourcePanel from "./SourcePanel";
+import $ from 'jquery';
 
 export default class PresetsSourcesDialog {
     constructor(domDialog) {
diff --git a/src/tabs/presets/TitlePanel/PresetTitlePanel.js b/src/tabs/presets/TitlePanel/PresetTitlePanel.js
index ec5d3673c5..a84ad15e05 100644
--- a/src/tabs/presets/TitlePanel/PresetTitlePanel.js
+++ b/src/tabs/presets/TitlePanel/PresetTitlePanel.js
@@ -1,4 +1,5 @@
 import { i18n } from "../../../js/localization";
+import $ from 'jquery';
 
 export default class PresetTitlePanel
 {
diff --git a/src/tabs/presets/presets.js b/src/tabs/presets/presets.js
index 79a9d8a69f..cfb565b3f9 100644
--- a/src/tabs/presets/presets.js
+++ b/src/tabs/presets/presets.js
@@ -1,3 +1,4 @@
+import '../../js/jqueryPlugins';
 import GUI, { TABS } from '../../js/gui';
 import { get as getConfig, set as setConfig } from '../../js/ConfigStorage';
 import { generateFilename } from '../../js/utils/generate_filename';
@@ -5,6 +6,7 @@ import { i18n } from '../../js/localization';
 import FC from '../../js/fc';
 import CONFIGURATOR from '../../js/data_storage';
 import UI_PHONES from '../../js/phones_ui';
+import $ from 'jquery';
 
 import { favoritePresets } from './FavoritePresets';
 import CliEngine from './CliEngine';
diff --git a/yarn.lock b/yarn.lock
index 4469d33371..d21a08071a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9970,20 +9970,22 @@ jquery-touchswipe@^1.6.19:
   resolved "https://registry.yarnpkg.com/jquery-touchswipe/-/jquery-touchswipe-1.6.19.tgz#dfd5ddaec0b78212dd500d29707129b9c7fd6cd4"
   integrity sha512-b0BGje9reNRU3u6ksAK9QqnX7yBRgLNe/wYG7DOfyDlhBlYjayIT8bSOHmcuvptIDW/ubM9CTW/mnZf9Rohuow==
 
-jquery-ui-npm@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/jquery-ui-npm/-/jquery-ui-npm-1.12.0.tgz#3f2cae88195c7d48acf3786cfa900d0403814e4d"
-  integrity sha1-PyyuiBlcfUis83hs+pANBAOBTk0=
+jquery-ui@^1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.13.2.tgz#de03580ae6604773602f8d786ad1abfb75232034"
+  integrity sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==
+  dependencies:
+    jquery ">=1.8.0 <4.0.0"
 
-jquery@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
-  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+jquery@3.6.3, "jquery@>=1.8.0 <4.0.0", jquery@^3.6.0:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
+  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
 
-jquery@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.1.tgz#fab0408f8b45fc19f956205773b62b292c147a16"
-  integrity sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==
+jquery@^3.6.3:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.0.tgz#fe2c01a05da500709006d8790fe21c8a39d75612"
+  integrity sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==
 
 js-base64@^2.1.9:
   version "2.6.4"