diff --git a/EMS/admin-ui-bundle/assets/css/adminlte.scss b/EMS/admin-ui-bundle/assets/css/adminlte.scss
index 8e9269cb9..ba7d93010 100644
--- a/EMS/admin-ui-bundle/assets/css/adminlte.scss
+++ b/EMS/admin-ui-bundle/assets/css/adminlte.scss
@@ -1 +1,3 @@
 @import "./admin-lte/adminlte";
+@import "select2/src/scss/core";
+@import "select2-bootstrap-5-theme/src/include-all";
diff --git a/EMS/admin-ui-bundle/assets/css/core/plugins/select.scss b/EMS/admin-ui-bundle/assets/css/core/plugins/select.scss
deleted file mode 100644
index c011cab14..000000000
--- a/EMS/admin-ui-bundle/assets/css/core/plugins/select.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-div.dropdown.bootstrap-select.form-select {
-  padding: 0;
-}
diff --git a/EMS/admin-ui-bundle/assets/js/core/plugins/select.js b/EMS/admin-ui-bundle/assets/js/core/plugins/select.js
index d67c0f8ee..3e9e2c2ef 100644
--- a/EMS/admin-ui-bundle/assets/js/core/plugins/select.js
+++ b/EMS/admin-ui-bundle/assets/js/core/plugins/select.js
@@ -1,14 +1,11 @@
 import $ from 'jquery'
-import 'bootstrap-select'
-import 'select2/dist/js/select2.full'
-import 'bootstrap-select/sass/bootstrap-select.scss'
-import 'select2/src/scss/core.scss'
-import '../../../css/core/plugins/select.scss'
+import 'select2/dist/js/select2';
 
 class Select {
   load (target) {
     const query = $(target)
     query.find('.select2').select2({
+      theme: 'bootstrap-5',
       allowClear: true,
       placeholder: '',
       escapeMarkup: function (markup) { return markup }
diff --git a/EMS/admin-ui-bundle/package.json b/EMS/admin-ui-bundle/package.json
index a50d64ea6..fb06573e3 100644
--- a/EMS/admin-ui-bundle/package.json
+++ b/EMS/admin-ui-bundle/package.json
@@ -46,6 +46,7 @@
     "jquery-lazyload": "^1.9.7",
     "jquery-ui": "^1.13.2",
     "select2": "^4.1.0-rc.0",
+    "select2-bootstrap-5-theme": "^1.3.0",
     "sortablejs": "^1.15.1",
     "uuid": "^9.0.1"
   }