From a74426943c444f3f7bca22091f6d7abb761d3a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Mon, 7 Nov 2022 14:31:21 +0300
Subject: [PATCH] Enhance the theming index document

---
 docs/en/Themes/Index.md | 34 ++++++++++++++++++++++------------
 docs/en/docs-nav.json   |  8 ++++----
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/docs/en/Themes/Index.md b/docs/en/Themes/Index.md
index 771b64187b..a588e37d3a 100644
--- a/docs/en/Themes/Index.md
+++ b/docs/en/Themes/Index.md
@@ -1,20 +1,30 @@
-# ABP Framework Official Themes
-ABP Framework provides some official themes. You can use them in your projects.
+# The Official Themes
+ABP Framework provides a complete UI theming system. While you can build your own themes, you can use the following pre-built themes freely in your applications.
 
-## Basic Theme
-The Basic Theme is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the base theme and build your own theme or styling on top of it.
+## The Basic Theme
+The Basic Theme is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/) styles. You can take the Basic Theme as the base theme and build your own theme or styling on top of it. Here, a screenshot from the theme:
 
 ![basic-theme-application-layout](../images/basic-theme-application-layout.png)
 
-- [Basic Theme - MVC](../UI/AspNetCore/Basic-Theme.md)
-- [Basic Theme - Blazor](../UI/Blazor/Basic-Theme.md)
-- [Basic Theme - Angular](../UI/Angular/Basic-Theme.md)
+### Documentation
 
-## LeptonX Lite
-[LeptonX Theme](https://x.leptontheme.com/) is a new generation theme of Lepton Theme. **LeptonX Lite** is a simplified variation of the **LeptonX Theme**. It is a free theme and you can use it in your ABP projects. 
+- [Basic Theme - MVC UI](../UI/AspNetCore/Basic-Theme.md)
+- [Basic Theme - Blazor UI](../UI/Blazor/Basic-Theme.md)
+- [Basic Theme - Angular UI](../UI/Angular/Basic-Theme.md)
+
+## The LeptonX Lite Theme
+**LeptonX Lite** is the free version of the [LeptonX Theme](https://x.leptontheme.com/), which is a part of the ABP Commercial. Here, a screenshot from the theme:
 
 ![LeptonX Lite application layout](../images/leptonxlite-theme-application-layout.jpeg)
 
-- [LeptonX Lite - MVC](LeptonXLite/AspNetCore.md)
-- [LeptonX Lite - Blazor](LeptonXLite/Blazor.md)
-- [LeptonX Lite - Angular](LeptonXLite/Angular.md)
\ No newline at end of file
+### Documentation
+
+- [LeptonX Lite - MVC UI](LeptonXLite/AspNetCore.md)
+- [LeptonX Lite - Blazor UI](LeptonXLite/Blazor.md)
+- [LeptonX Lite - Angular UI](LeptonXLite/Angular.md)
+
+## See Also
+
+* [Theming - MVC UI](../UI/AspNetCore/Theming.md)
+* [Theming - Blazor UI](../UI/Blazor/Theming.md)
+* [Theming - Angular UI](../UI/Angular/Theming.md)
\ No newline at end of file
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index 611ddb351e..8dac526d96 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -630,10 +630,6 @@
     {
       "text": "User Interface",
       "items": [
-        {
-          "text": "Themes",
-          "path": "Themes/Index.md"
-        },
         {
           "text": "MVC / Razor Pages",
           "items": [
@@ -1198,6 +1194,10 @@
         {
           "text": "Common",
           "items": [
+            {
+              "text": "Themes",
+              "path": "Themes/Index.md"
+            },
             {
               "text": "Overriding the User Interface",
               "path": "Customizing-Application-Modules-Overriding-User-Interface.md"