diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/Caps-Lock-Directive.md
similarity index 100%
rename from docs/en/UI/Angular/CapsLock.directive.md
rename to docs/en/UI/Angular/Caps-Lock-Directive.md
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index fa0a98915a..09a9433787 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -1122,6 +1122,14 @@
                   "text": "Loading Directive",
                   "path": "UI/Angular/Loading-Directive.md"
                 },
+                {
+                  "text": "Show Password Directive",
+                  "path": "UI/Angular/Show-Password-Directive.md"
+                },
+                {
+                  "text": "Caps Lock Directive",
+                  "path": "UI/Angular/Caps-Lock-Directive.md"
+                },
                 {
                   "text": "Toast Overlay",
                   "path": "UI/Angular/Toaster-Service.md"
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 2e1dc7608f..e1260626d7 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -141,17 +141,24 @@
 
     <ng-template ngSwitchCase="passwordinputgroup">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
-      <abp-password
-        *abpReplaceableTemplate="{
-          componentKey: passwordKey,
-          inputs: {
-            inputId: { value: prop.id },
-            formControlName: { value: prop.name }
-          }
-        }"
-        [inputId]="prop.id"
-        [formControlName]="prop.name"
-      ></abp-password>
+      <div class="input-group form-group" validationTarget>
+        <input
+          class="form-control"
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [abpShowPassword]="showPassword"
+        />
+        <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword">
+          <i
+            class="fa"
+            aria-hidden="true"
+            [ngClass]="{
+              'fa-eye-slash': !showPassword,
+              'fa-eye': showPassword
+            }"
+          ></i>
+        </button>
+      </div>
     </ng-template>
 
     <small *ngIf="prop.formText" class="text-muted d-block">{{
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
index 33882fbd43..86e2197149 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
@@ -1,4 +1,4 @@
-import { CoreModule } from '@abp/ng.core';
+import { CoreModule, ShowPasswordDirective } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import {
@@ -49,7 +49,8 @@ import { CreateInjectorPipe } from './pipes/create-injector.pipe';
     NgbDropdownModule,
     NgbTimepickerModule,
     NgbTypeaheadModule,
-    NgbTooltipModule
+    NgbTooltipModule,
+    ShowPasswordDirective
   ],
 })
 export class BaseUiExtensionsModule {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
index 22fcd6e4f5..8991e432e7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
@@ -2,6 +2,10 @@ import { Component, forwardRef, Injector, Input } from '@angular/core';
 import { AbstractNgModelComponent } from '@abp/ng.core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+/**
+ * @deprecated use ShowPasswordDirective directive 
+ * https://docs.abp.io/en/abp/latest/UI/Angular/Show-Password-Directive
+ */
 @Component({
   selector: 'abp-password',
   templateUrl: `./password.component.html`,