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 80ff5aa501..23180bdb06 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -1128,6 +1128,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/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index 74e82088a2..254b481c16 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/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/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
index 4567ef45d6..559515268c 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
@@ -3,6 +3,10 @@ import { AbstractNgModelComponent } from '@abp/ng.core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
+/**
+ * @deprecated use ShowPasswordDirective directive 
+ * https://docs.abp.io/en/abp/latest/UI/Angular/Show-Password-Directive
+ */
 @Component({
   selector: 'abp-password',
   standalone: true,