diff --git a/docs/en/ui-themes/lepton-x/blazor.md b/docs/en/ui-themes/lepton-x/blazor.md
index 5e49752ebb..2287b5aeac 100644
--- a/docs/en/ui-themes/lepton-x/blazor.md
+++ b/docs/en/ui-themes/lepton-x/blazor.md
@@ -347,8 +347,43 @@ namespace LeptonX.DemoApp.Blazor.MyComponents
 
 > Don't forget to remove repeated attributes from the razor page!
 
----
+#### Customizing the Footer Section
+
+You can add a new `LeptonXFooter.razor` file and override the `Footer` component as follows:
+
+```cs
+@using Volo.Abp.DependencyInjection
+@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
+
+@inherits Footer
+@attribute [ExposeServices(typeof(Footer))]
+@attribute [Dependency(ReplaceServices = true)]
+
+<div class="lpx-footbar-container">
+    <div class="lpx-footbar">
+        <div class="lpx-footbar-copyright">
+            <span>@DateTime.UtcNow.Year©</span>
+            <a href="https://leptontheme.com/" target="_blank">Lepton ThemeXXX</a>
+            <span>by</span>
+            <a href="https://volosoft.com/" target="_blank">Volosoft</a>
+        </div>
+        <div class="lpx-footbar-solo-links">
+            <a href="#">About</a>
+            <a href="#">Privacy</a>
+            <a href="#">Contact</a>
+        </div>
+    </div>
+</div>
+```
+
+If you are using **Top Menu Layout**, then you can change the namespace as follows:
+
+```diff
+- @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
++ @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu
+```
 
+> You can use the same approach customize the other components always.
 
 
 ## Common Components
diff --git a/docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png b/docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png
new file mode 100644
index 0000000000..06721044b8
Binary files /dev/null and b/docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png differ
diff --git a/docs/en/ui-themes/lepton-x/mvc.md b/docs/en/ui-themes/lepton-x/mvc.md
index ce12a0ea95..683306adfe 100644
--- a/docs/en/ui-themes/lepton-x/mvc.md
+++ b/docs/en/ui-themes/lepton-x/mvc.md
@@ -162,6 +162,22 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
 > - **_Sidebar.cshtml**
 > - **_Toolbar.cshtml**
 
+#### Customizing the Footer Section
+
+Add the **_Footer.cshtml** file under the **Themes/LeptonX/Layouts/Application** folder to customize the footer:
+
+```html
+<div class="text-center py-2 lpx-footer">
+    <span class="copyright-text">
+       @DateTime.Now.Year © AbpSolution1<br />
+    </span>
+</div>
+````
+
+![Customizing Footer](images/leptonx-mvc-customizing-footer.png)
+
+> You can customize the **_Sidebar.cshtml** and **_Toolbar.cshtml** files as well.
+
 ### Account Layout
 
 ![Account layout](images/leptonx-account-layout-new.png)