diff --git a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.js b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.js
index ae8e694de3..aeced4f4dc 100644
--- a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.js
+++ b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.js
@@ -8,44 +8,46 @@
 
         var l = abp.localization.getResource('AbpSettingManagement');
 
-        $("#EmailSettingsForm").on('submit', function (event) {
-            event.preventDefault();
+        abp.event.on('Abp.SettingManagement.View.Render.Volo.Abp.EmailSetting', function (eventData) {
+            $("#EmailSettingsForm").on('submit', function (event) {
+                event.preventDefault();
 
-            if (!$(this).valid()) {
-                return;
-            }
+                if (!$(this).valid()) {
+                    return;
+                }
+
+                var form = $(this).serializeFormToObject();
+                volo.abp.settingManagement.emailSettings.update(form).then(function (result) {
+                    $(document).trigger("AbpSettingSaved");
+                });
 
-            var form = $(this).serializeFormToObject();
-            volo.abp.settingManagement.emailSettings.update(form).then(function (result) {
-                $(document).trigger("AbpSettingSaved");
             });
 
-        });
+            $('#SmtpUseDefaultCredentials').change(function () {
+                if (this.checked) {
+                    $('#HideSectionWhenUseDefaultCredentialsIsChecked').slideUp();
+                } else {
+                    $('#HideSectionWhenUseDefaultCredentialsIsChecked').slideDown();
+                }
+            });
 
-        $('#SmtpUseDefaultCredentials').change(function () {
-            if (this.checked) {
-                $('#HideSectionWhenUseDefaultCredentialsIsChecked').slideUp();
-            } else {
-                $('#HideSectionWhenUseDefaultCredentialsIsChecked').slideDown();
-            }
-        });
+            _sendTestEmailModal.onOpen(function () {
+                var $form = _sendTestEmailModal.getForm();
+                _sendTestEmailModal.getForm().off('abp-ajax-success');
 
-        _sendTestEmailModal.onOpen(function () {
-            var $form = _sendTestEmailModal.getForm();
-            _sendTestEmailModal.getForm().off('abp-ajax-success');
+                $form.on('abp-ajax-success', function () {
+                    _sendTestEmailModal.setResult();
+                });
+            })
 
-            $form.on('abp-ajax-success', function () {
-                _sendTestEmailModal.setResult();
+            _sendTestEmailModal.onResult(function () {
+                abp.notify.success(l('SuccessfullySent'));
             });
-        })
-        
-        _sendTestEmailModal.onResult(function () {
-            abp.notify.success(l('SuccessfullySent'));
-        });
 
-        $("#SendTestEmailButton").click(function (e) {
-            e.preventDefault();
-            _sendTestEmailModal.open();
+            $("#SendTestEmailButton").click(function (e) {
+                e.preventDefault();
+                _sendTestEmailModal.open();
+            });
         });
     });
 
diff --git a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml
index 6ee1d62299..3f9c347cc6 100644
--- a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml
+++ b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml
@@ -21,19 +21,23 @@
 <div id="SettingManagementWrapper">
     <abp-card>
         <abp-card-body>
-            <abp-tabs tab-style="PillVertical" vertical-header-size="_3">
-                @foreach (var group in Model.SettingPageCreationContext.Groups)
-                {
-                    <abp-tab title="@group.DisplayName">
-                        <h2>@group.DisplayName</h2>
-                        <hr class="my-4" />
-                        @await Component.InvokeAsync(group.ComponentType, new
+            <div class="row">
+                <div class="col-md-3">
+                    <ul class="nav flex-column nav-pills" id="tabs-nav" role="tablist">
+                        @for (var i = 0; i < Model.SettingPageCreationContext.Groups.Count; i++)
                         {
-                            parameter = group.Parameter
-                        })
-                    </abp-tab>
-                }
-            </abp-tabs>
+                            var group = Model.SettingPageCreationContext.Groups[i];
+                            var active = i == 0 ? "active" : string.Empty;
+                            <li class="nav-item" id="@group.Id">
+                                <a class="nav-link @active" data-bs-toggle="pill" role="tab">@group.DisplayName</a>
+                            </li>
+                        }
+                    </ul>
+                </div>
+                <div class="col-md-9">
+                    <div class="tab-content" id="tab-content"></div>
+                </div>
+            </div>
         </abp-card-body>
     </abp-card>
 </div>
diff --git a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml.cs b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml.cs
index 0dcb3fb388..1e55bd2f6a 100644
--- a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml.cs
+++ b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml.cs
@@ -1,3 +1,4 @@
+using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.ApplicationConfigurations;
@@ -34,6 +35,19 @@ public class IndexModel : AbpPageModel
         return Task.FromResult<IActionResult>(Page());
     }
 
+    public virtual async Task<IActionResult> OnPostRenderViewAsync(string id)
+    {
+        var context = await SettingPageContributorManager.ConfigureAsync();
+
+        var view = context.Groups.FirstOrDefault(x => x.Id == id);
+        if (view != null)
+        {
+            return ViewComponent(view.ComponentType, view.Parameter);
+        }
+
+        return NoContent();
+    }
+
     public virtual async Task<NoContentResult> OnPostRefreshConfigurationAsync()
     {
         await LocalEventBus.PublishAsync(
diff --git a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.js b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.js
index 8af1bb6715..b7c0c5b32e 100644
--- a/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.js
+++ b/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.js
@@ -1,6 +1,24 @@
 (function ($) {
     var l = abp.localization.getResource('AbpSettingManagement');
 
+    $('#tabs-nav .nav-item').click(function () {
+        var id = $(this).attr("id")
+        abp.ui.block({
+          elm: '#tab-content',
+          busy: true,
+          promise: abp.ajax({
+               type: "POST",
+               url: "SettingManagement?handler=RenderView&id=" + id,
+               dataType: "html",
+               contentType: false,
+               processData: false
+           }).done(function (response) {
+               $('#tab-content').html(response);
+               abp.event.trigger('Abp.SettingManagement.View.Render.' + id);
+           })
+        });
+    }).first().click();
+
     $(document).on('AbpSettingSaved', function () {
         abp.notify.success(l('SuccessfullySaved'));