diff --git a/docs/en/UI/AspNetCore/Custom-Setting-Page.md b/docs/en/UI/AspNetCore/Custom-Setting-Page.md
new file mode 100644
index 0000000000..5a1a634aa3
--- /dev/null
+++ b/docs/en/UI/AspNetCore/Custom-Setting-Page.md
@@ -0,0 +1,82 @@
+# Custom Setting Page
+
+There are several settings tabs from different modules. You can add a custom setting page to your project.
+
+### Create a setting View Component
+
+Create `MySettingGroup` folder under the `Components` folder. Add a new view component. Name it as `MySettingGroupViewComponent`:
+
+![MySettingGroupViewComponent](../../images/my-setting-group-view-component.png)
+
+Open the `MySettingGroupViewComponent.cs` and change the whole content as shown below:
+
+```csharp
+public class MySettingGroupViewComponent : AbpViewComponent
+{
+    public virtual IViewComponentResult Invoke()
+    {
+        return View("~/Components/MySettingGroup/Default.cshtml");
+    }
+}
+```
+
+> You can also use the `InvokeAsync` method, In this example, we use the `Invoke` method.
+
+### Default.cshtml
+
+Create `Default.cshtml` file under the `MySettingGroup` folder.
+
+Open the `Default.cshtml` and change the whole content as shown below:
+
+```html
+<div>
+  <p>My setting group page</p>
+</div>
+```
+
+### BookStoreSettingPageContributor
+
+Create an `BookStoreSettingPageContributor.cs` file under the `Settings` folder:
+
+![BookStoreSettingPageContributor](../../images/my-setting-group-page-contributor.png)
+
+The content of the file is shown below:
+
+```csharp
+public class BookStoreSettingPageContributor : ISettingPageContributor
+{
+    public Task ConfigureAsync(SettingPageCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingPageGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupViewComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+Open the `BookStoreWebModule.cs` file and add the following code:
+
+```csharp
+Configure<SettingManagementPageOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingPageContributor());
+});
+```
+
+### Run the Application
+
+Navigate to `/SettingManagement` route to see the changes:
+
+![Custom Settings Tab](../../images/my-setting-group-ui.png)
\ No newline at end of file
diff --git a/docs/en/images/my-setting-group-page-contributor.png b/docs/en/images/my-setting-group-page-contributor.png
new file mode 100644
index 0000000000..3be3737e6f
Binary files /dev/null and b/docs/en/images/my-setting-group-page-contributor.png differ
diff --git a/docs/en/images/my-setting-group-ui.png b/docs/en/images/my-setting-group-ui.png
new file mode 100644
index 0000000000..b9d3f1b403
Binary files /dev/null and b/docs/en/images/my-setting-group-ui.png differ
diff --git a/docs/en/images/my-setting-group-view-component.png b/docs/en/images/my-setting-group-view-component.png
new file mode 100644
index 0000000000..02843f968e
Binary files /dev/null and b/docs/en/images/my-setting-group-view-component.png differ
diff --git a/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md b/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md
new file mode 100644
index 0000000000..2d852417cd
--- /dev/null
+++ b/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md
@@ -0,0 +1,82 @@
+# 自定义设置页面
+
+一些模块内置了设置页面,你也可以在项目中添加自己的设置页面.
+
+### 创建视图组件
+
+在 `Components` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupViewComponent` 的视图组件:
+
+![MySettingGroupViewComponent](../../images/my-setting-group-view-component.png)
+
+打开 `MySettingGroupViewComponent.cs` 替换为以下内容:
+
+```csharp
+public class MySettingGroupViewComponent : AbpViewComponent
+{
+    public virtual IViewComponentResult Invoke()
+    {
+        return View("~/Components/MySettingGroup/Default.cshtml");
+    }
+}
+```
+
+> 你还可以使用 `InvokeAsync` 方法,在这个示例中我们使用 `Invoke` 方法.
+
+### Default.cshtml
+
+在 `MySettingGroup` 目录下创建 `Default.cshtml` 文件.
+
+打开 `Default.cshtml` 替换为以下内容:
+
+```html
+<div>
+  <p>My setting group page</p>
+</div>
+```
+
+### BookStoreSettingPageContributor
+
+在 `Settings` 目录下创建 `BookStoreSettingPageContributor.cs` 文件.
+
+![BookStoreSettingPageContributor](../../images/my-setting-group-page-contributor.png)
+
+文件内容如下:
+
+```csharp
+public class BookStoreSettingPageContributor : ISettingPageContributor
+{
+    public Task ConfigureAsync(SettingPageCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingPageGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupViewComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+打开 `BookStoreWebModule.cs` 文件添加以下代码:
+
+```csharp
+Configure<SettingManagementPageOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingPageContributor());
+});
+```
+
+### 运行应用程序
+
+导航到 `/SettingManagement` 路由查看更改:
+
+![Custom Settings Tab](../../images/my-setting-group-ui.png)
\ No newline at end of file
diff --git a/docs/zh-Hans/images/my-setting-group-page-contributor.png b/docs/zh-Hans/images/my-setting-group-page-contributor.png
new file mode 100644
index 0000000000..3be3737e6f
Binary files /dev/null and b/docs/zh-Hans/images/my-setting-group-page-contributor.png differ
diff --git a/docs/zh-Hans/images/my-setting-group-ui.png b/docs/zh-Hans/images/my-setting-group-ui.png
new file mode 100644
index 0000000000..b9d3f1b403
Binary files /dev/null and b/docs/zh-Hans/images/my-setting-group-ui.png differ
diff --git a/docs/zh-Hans/images/my-setting-group-view-component.png b/docs/zh-Hans/images/my-setting-group-view-component.png
new file mode 100644
index 0000000000..02843f968e
Binary files /dev/null and b/docs/zh-Hans/images/my-setting-group-view-component.png differ