diff --git a/docs/en/ui-themes/lepton-x/blazor.md b/docs/en/ui-themes/lepton-x/blazor.md
index 6ae4bc7da1..9f869ee91c 100644
--- a/docs/en/ui-themes/lepton-x/blazor.md
+++ b/docs/en/ui-themes/lepton-x/blazor.md
@@ -316,8 +316,45 @@ namespace LeptonX.DemoApp.Blazor.MyComponents
 
 > Don't forget to remove repeated attributes from the razor page!
 
----
+#### Customizing Footer Example
+
+Add a new `LeptonXFooter.razor` file and override the `Footer` component.
+
+```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**, You can change the namespace to
 
+```diff
+- @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
++ @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu
+```
+
+Use above way to customize the other components as well.
+
+---
 
 
 ## 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..10d5843d2e
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 a317e8b9ed..bfdf20d562 100644
--- a/docs/en/ui-themes/lepton-x/mvc.md
+++ b/docs/en/ui-themes/lepton-x/mvc.md
@@ -138,6 +138,20 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
 > - **_Sidebar.cshtml**
 > - **_Toolbar.cshtml**
 
+#### Customizing Footer Example
+
+Add the **_Footer.cshtml** file under the **Themes/LeptonX/Layouts/Application** folder to customize the footer. You can customize the **_Sidebar.cshtml** and **_Toolbar.cshtml** files as well.
+
+![Customizing Footer](images/leptonx-mvc-customizing-footer.png)
+
+```html
+<div class="text-center py-2 lpx-footer">
+    <span class="copyright-text">
+       @DateTime.Now.Year © AbpSolution1<br />
+    </span>
+</div>
+````
+
 ### Account Layout
 
 ![Account layout](images/leptonx-account-layout-new.png)