diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml
index 5182923621..8bce5cf45e 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml
@@ -62,16 +62,8 @@
             <abp-input asp-for="ViewModel.DisplayName"/>
             <div class="mb-3">
                 <label class="form-label" for="requiredPermissionName">@L["RequiredPermissionName"].Value</label>
-                <select id="requiredPermissionName" asp-for="ViewModel.RequiredPermissionName"
-                        class="auto-complete-select"
-                        data-autocomplete-api-url="/api/cms-kit-admin/menu-items/lookup/permissions"
-                        data-autocomplete-display-property="displayName"
-                        data-autocomplete-value-property="name"
-                        data-autocomplete-items-property="items"
-                        data-autocomplete-filter-param-name="filter"
-                        data-autocomplete-allow-clear="true"
-                        data-autocomplete-parent-selector="#menu-create-modal">
-                </select>
+                <select asp-for="ViewModel.RequiredPermissionName" id="requiredPermissionName" class="form-control"></select>
+                <div id="tooltip_container"></div>
             </div>
             <abp-input asp-for="ViewModel.IsActive"/>
             <abp-input asp-for="ViewModel.Icon"/>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml
index be1b4b1f86..48e37b6468 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml
@@ -66,22 +66,27 @@
             <abp-input asp-for="ViewModel.DisplayName"/>
             <div class="mb-3">
                 <label class="form-label" for="requiredPermissionName">@L["RequiredPermissionName"].Value</label>
-                <select id="requiredPermissionName" asp-for="ViewModel.RequiredPermissionName"
-                        class="auto-complete-select"
-                        data-autocomplete-api-url="/api/cms-kit-admin/menu-items/lookup/permissions"
-                        data-autocomplete-display-property="displayName"
-                        data-autocomplete-value-property="name"
-                        data-autocomplete-items-property="items"
-                        data-autocomplete-filter-param-name="filter"
-                        data-autocomplete-allow-clear="true"
-                        data-autocomplete-parent-selector="#menu-update-modal">
-
+                <select asp-for="ViewModel.RequiredPermissionName" id="requiredPermissionName" class="form-control">
                     @if(Model.ViewModel.RequiredPermissionName != null)
                     {
                         var selectedPermission = Model.Permissions.FirstOrDefault(p => p.Name == Model.ViewModel.RequiredPermissionName);
-                        <option selected value="@Model.ViewModel.RequiredPermissionName">@(selectedPermission == null ? Model.ViewModel.RequiredPermissionName : selectedPermission.DisplayName)</option>
+                        if (selectedPermission != null)
+                        {
+                            <option 
+                                data-bs-toggle="tooltip" 
+                                data-bs-container="#tooltip_container" 
+                                data-bs-placement="top" 
+                                title="@selectedPermission.DisplayName" 
+                                selected 
+                                value="@Model.ViewModel.RequiredPermissionName">@selectedPermission.Name</option>
+                        }
+                        else
+                        {
+                            <option selected value="@Model.ViewModel.RequiredPermissionName">@Model.ViewModel.RequiredPermissionName</option>   
+                        }
                     }
                 </select>
+                <div id="tooltip_container"></div>
             </div>
             <abp-input asp-for="ViewModel.IsActive"/>
             <abp-input asp-for="ViewModel.Icon"/>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js
index 0c4103c6f8..3459328956 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js
@@ -8,6 +8,7 @@ $(function () {
             var $url = $('#ViewModel_Url');
             var $displayName = $('#ViewModel_DisplayName');
             var $menuItemForm = $('#menu-item-form');
+            var $selectRequiredPermission = $('#requiredPermissionName');
 
             $pageId.on('change', function (params) {
                 $url.prop('disabled', $pageId.val());
@@ -20,6 +21,51 @@ $(function () {
                 }
             })
 
+            function initSelectRequiredPermission(){
+                function formatDisplayName(item) {
+                    if (!item.id) {
+                        return item.text;
+                    }
+                    var $displayName = $(`<span data-bs-toggle="tooltip" data-bs-container="#tooltip_container" data-bs-placement="top" title="${item.displayName}">${item.id}</span>`);
+                    $displayName.tooltip();
+                    return $displayName;
+                }
+                
+                $selectRequiredPermission.select2({
+                    ajax:{
+                        url: '/api/cms-kit-admin/menu-items/lookup/permissions',
+                        delay: 250,
+                        dataType: "json",
+                        data: function (params) {
+                            let query = {};
+                            query["filter"] = params.term;
+                            return query;
+                        },
+                        processResults: function (data) {
+                            let retVal = [];
+                            let items = data["items"];
+                            $('body').tooltip('dispose');
+                            items.forEach(function (item, index) {
+                                retVal.push({
+                                    id: item["name"],
+                                    text: item["name"],
+                                    displayName: item["displayName"]
+                                })
+                            });
+                            return {
+                                results: retVal
+                            };
+                        }
+                    },
+                    templateResult: formatDisplayName,
+                    width: '100%',
+                    dropdownParent: $('#menu-create-modal'),
+                    language: abp.localization.currentCulture.cultureName
+                });
+            }
+
+            initSelectRequiredPermission();
+            
             $menuItemForm.on('submit', function (e) {
                 $('[href="#url"]').tab('show');
             });
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js
index 173c6459e5..eb15bf7733 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js
@@ -8,6 +8,7 @@ $(function () {
             var $url = $('#ViewModel_Url');
             var $displayName = $('#ViewModel_DisplayName');
             var $menuItemForm = $('#menu-item-form');
+            var $selectRequiredPermission = $('#requiredPermissionName');
 
             $pageId.on('change', function (params) {
                 $url.prop('disabled', $pageId.val());
@@ -21,6 +22,52 @@ $(function () {
 
             $pageId.trigger('change');
 
+            function initSelectRequiredPermission(){
+                function formatDisplayName(item) {
+                    if (!item.id) {
+                        return item.text;
+                    }
+                    var $displayName = $(`<span data-bs-container="#tooltip_container" data-bs-toggle="tooltip"  data-bs-placement="top" title="${item.displayName}">${item.id}</span>`);
+                    $displayName.tooltip();
+                    return $displayName;
+                }
+
+                $selectRequiredPermission.select2({
+                    ajax:{
+                        url: '/api/cms-kit-admin/menu-items/lookup/permissions',
+                        delay: 250,
+                        dataType: "json",
+                        data: function (params) {
+                            let query = {};
+                            query["filter"] = params.term;
+                            return query;
+                        },
+                        processResults: function (data) {
+                            let retVal = [];
+                            let items = data["items"];
+                            $('body').tooltip('dispose');
+                            items.forEach(function (item, index) {
+                                retVal.push({
+                                    id: item["name"],
+                                    text: item["name"],
+                                    displayName: item["displayName"]
+                                })
+                            });
+                            return {
+                                results: retVal
+                            };
+                        }
+                    },
+                    templateResult: formatDisplayName,
+                    width: '100%',
+                    dropdownParent: $('#menu-update-modal'),
+                    language: abp.localization.currentCulture.cultureName
+                });
+            }
+
+            initSelectRequiredPermission();
+            $('[data-ts-toggle="tooltip"]').tooltip()
+
             $menuItemForm.on('submit', function (e) {
                 $('[href="#url"]').tab('show');
             });