diff --git a/docs/en/Themes/LeptonXLite/Index.md b/docs/en/Themes/LeptonXLite/Index.md
new file mode 100644
index 0000000000..c23767362b
--- /dev/null
+++ b/docs/en/Themes/LeptonXLite/Index.md
@@ -0,0 +1,20 @@
+# ABP Framework Official Themes
+ABP Framework provides some official themes. You can use them in your projects.
+
+## 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.
+
+![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)
+
+## 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. 
+
+![](../../images/leptonxlite-theme-application-layout.jpeg)
+
+- [LeptonX Lite - MVC](AspNetCore.md)
+- [LeptonX Lite - Blazor](Blazor.md)
+- [LeptonX Lite - Angular](Angular.md)
\ No newline at end of file
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index 14c584d376..453a158b0c 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -630,6 +630,10 @@
     {
       "text": "User Interface",
       "items": [
+        {
+          "text": "Themes",
+          "path": "Themes/LeptonXLite/Index.md"
+        },
         {
           "text": "MVC / Razor Pages",
           "items": [
diff --git a/docs/en/images/leptonxlite-theme-application-layout.jpeg b/docs/en/images/leptonxlite-theme-application-layout.jpeg
new file mode 100644
index 0000000000..12e15ddcb7
Binary files /dev/null and b/docs/en/images/leptonxlite-theme-application-layout.jpeg differ