diff --git a/docs/en/ui-themes/lepton-x-lite/angular.md b/docs/en/ui-themes/lepton-x-lite/angular.md
index 430bc2ee73..62f2980952 100644
--- a/docs/en/ui-themes/lepton-x-lite/angular.md
+++ b/docs/en/ui-themes/lepton-x-lite/angular.md
@@ -31,42 +31,37 @@ yarn add bootstrap-icons
 Note: You should remove the old theme styles from "angular.json" if you are switching from "ThemeBasic" or "Lepton."
 Look at the [Theme Configurations](../../framework/ui/angular/theme-configurations.md) list of styles. Depending on your theme, you can alter your styles in angular.json.
 
-- Finally, remove `ThemeBasicModule`, `provideThemeBasicConfig` from `app.module.ts`, and import the related modules in `app.module.ts`
+- Finally, remove `provideThemeBasicConfig` from `app.config.ts`, and import the related providers in `app.config.ts`
 
 ```js
-import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x";
-
-@NgModule({
-  imports: [
-    // ...
-    // do not forget to remove ThemeBasicModule or other old theme module
-    //  ThemeBasicModule
-    ThemeLeptonXModule.forRoot()
-  ],
+import { provideThemeLeptonX, withThemeLeptonXOptions } from "@abp/ng.theme.lepton-x";
+import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts";
+
+export const appConfig: ApplicationConfig = {
   providers: [
-    // do not forget to remove provideThemeBasicConfig or other old theme providers
-    // provideThemeBasicConfig
+    provideSideMenuLayout(),
+    provideThemeLeptonX(
+      withThemeLeptonXOptions({
+        styleFactory: (styles) => {
+          return styles;
+        },
+      })
+    ),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should import the following module as well:
+Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should provide the following provider as well:
 
 ```js
-import { AccountLayoutModule } from "@abp/ng.theme.lepton-x/account";
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    AccountLayoutModule.forRoot(),
-    // ...
+import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAccountLayout()
   ],
-  // ...
-})
-export class AppModule {}
+};
+
 ```
 
 To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss`
diff --git a/docs/en/ui-themes/lepton-x/angular.md b/docs/en/ui-themes/lepton-x/angular.md
index 60ad62b5d9..7ce2b809ff 100644
--- a/docs/en/ui-themes/lepton-x/angular.md
+++ b/docs/en/ui-themes/lepton-x/angular.md
@@ -9,51 +9,60 @@ To add `LeptonX` into your existing projects, follow the steps below.
 
 Add theme-specific styles into the `styles` array of the file. Check the [Theme Configurations](../../framework/ui/angular/theme-configurations.md#lepton-x-commercial) documentation for more information.
 
-Importing a CSS file as an ECMA module is not supported in Angular 14. Therefore, we need to add the styles in the angular.json file.
 
-- At last, remove `ThemeLeptonModule` from `app.module.ts` and `shared.module.ts`, and import the following modules in `app.module.ts`
+- At last, remove `provideThemeLepton` from `app.config.ts`, and add the following providers in `app.config.ts`
+
 
 ```ts
-import {
-  HttpErrorComponent,
-  ThemeLeptonXModule,
-} from "@volosoft/abp.ng.theme.lepton-x";
-import { SideMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    // ThemeLeptonModule.forRoot(), -> remove this line.
-    ThemeLeptonXModule.forRoot(),
-    SideMenuLayoutModule.forRoot(), // depends on which layout you choose
-    // ...
+import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
+import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
+// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // provideThemeLepton() delete this
+    provideSideMenuLayout(), // depends on which layout you choose
+    provideThemeLeptonX(
+      withThemeLeptonXOptions({
+        styleFactory: styles => {
+          return styles;
+        },
+        themeOptions: {
+          localStorageKey: 'lpx-theme',
+          styleFactory: styles => {
+            return styles;
+          },
+        },
+      })
+    ),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add TopMenuLayoutModule as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
+If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add `provideTopMenuLayout` as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
 
 ```ts
-import {
-  HttpErrorComponent,
-  ThemeLeptonXModule,
-} from "@volosoft/abp.ng.theme.lepton-x";
-import { TopMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    // ThemeLeptonModule.forRoot(), -> remove this line.
-    ThemeLeptonXModule.forRoot(),
-    TopMenuLayoutModule.forRoot(),
+import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
+import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTopMenuLayout(),
+    provideThemeLeptonX(
+      withThemeLeptonXOptions({
+        styleFactory: styles => {
+          return styles;
+        },
+        themeOptions: {
+          localStorageKey: 'lpx-theme',
+          styleFactory: styles => {
+            return styles;
+          },
+        },
+      })
+    ),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 - At this point, `LeptonX` theme should be up and running within your application. However, you may need to overwrite some css variables based your needs for every theme available as follows: