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 283c926a9a..37beb37169 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
@@ -6,10 +6,14 @@
         <abp-script src="/Pages/SettingManagement/Index.js" />
     </abp-script-bundle>
 }
+<abp-tabs tab-style="PillVertical"  vertical-header-size="_2">
+
 @foreach (var group in Model.SettingPageCreationContext.Groups)
 {
-    <h2 id="@group.Id">@group.DisplayName</h2>
-    <div>
+    <abp-tab title="@group.DisplayName">
+        
+        <h2>@group.DisplayName</h2>
         @await Component.InvokeAsync(group.ComponentType)
-    </div>
-}
\ No newline at end of file
+    </abp-tab>
+}
+</abp-tabs>
\ No newline at end of file