diff --git a/src/app/user-management/reset-password/reset-password.component.html b/src/app/user-management/reset-password/reset-password.component.html
index 66175bb..3897e4c 100644
--- a/src/app/user-management/reset-password/reset-password.component.html
+++ b/src/app/user-management/reset-password/reset-password.component.html
@@ -1 +1,128 @@
-<p>reset-password works!</p>
+<div id="layout-wrapper">
+    <div class="inner-pg-sp">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12">
+                    <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
+
+                    </div>
+                </div>
+            </div>
+            <div class="container-fluid">
+                <div class="col-xl-12 mt-4">
+                    <div class="card border">
+                        <div class="card-body">
+                            <div class="table-section">
+                                <div class="row">
+                                    <div class="col-lg-12">
+                                        <div class="card-body mt-2 p-0">
+                                            <div class="card mb-0 mt-2">
+                                                <div
+                                                    class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
+                                                    {{'ResetPassword' | translate}}
+                                                </div>
+                                                <div class="card-body">
+                                                    <form >
+                                                         <div class="row g-3 mb-3">
+                                                            <div class="col-md-6">
+                                                                <div class="d-flex align-items-center gap-2">
+                                                                    <label for="UserID" class="text-nowrap">
+                                                                        {{ 'UserID' | translate }}<span
+                                                                            class="mandatory">*</span>
+                                                                    </label>
+                                                                    <div class="password-wrapper position-relative w-100">
+                                                                        <div class="d-flex flex-row align-items-stretch">
+                                                                        <input type="text" id="UserID"
+                                                                            class="form-control"
+                                                                            
+                                                                            placeholder="{{ 'UserID' | translate }}" appNoWhitespaces
+                                                                            
+                                                                            />
+                                                                            
+                                                                       </div>
+                                                                        <!-- <div class="text-danger">
+                                                                            {{ 'requiredField' | translate }}
+                                                                        </div> -->
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-6">
+                                                                <div class="d-flex align-items-start gap-2">
+                                                                    <label for="EnterNewPassword"
+                                                                        class="text-nowrap mt-2">
+                                                                        {{ 'EnterNewPassword' | translate }}<span
+                                                                            class="mandatory">*</span>
+                                                                    </label>
+                                                                    <div class="password-wrapper position-relative w-100">
+                                                                        
+                                                                            <input id="EnterNewPassword"
+                                                                            class="form-control"
+                                                                            autocomplete="new-password"
+                                                                            type="{{passwordType1}}"
+                                                                            maxlength="500"
+                                                                            placeholder="{{ 'EnterNewPassword' | translate }}" appNoWhitespaces
+                                                                            rows="3"  />
+                                                                            <app-password-hide-show #psh1 class="password-eye align-items-stretch" [showPassword]="true" (onEyeClick)="togglePasswordType1()"></app-password-hide-show>
+                                                                       
+                                                                        
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                        </div>
+                                                         <div class="row g-3 mb-3">
+                                                             <div class="col-md-6">
+                                                                <div class="d-flex align-items-center gap-2">
+                                                                    <label for="ConfirmPassword" class="text-nowrap">
+                                                                        {{ 'ConfirmPassword' | translate }}<span
+                                                                            class="mandatory">*</span>
+                                                                    </label>
+                                                                    <div class="password-wrapper position-relative w-100">
+                                                                       <input id="ConfirmPassword"
+                                                                            class="form-control"
+                                                                            type="{{passwordType2}}"
+                                                                            
+                                                                            placeholder="{{ 'ConfirmPassword' | translate }}" appNoWhitespaces/>
+                                                                            <app-password-hide-show class="password-eye align-items-stretch" #psh2 [showPassword]="true" (onEyeClick)="togglePasswordType2()"></app-password-hide-show>
+                                                                        <!-- <div class="text-danger">
+                                                                             <div>
+                                                                                    {{ 'requiredField' | translate }}
+                                                                                </div>
+                                                                        </div>
+                                                                        <div>
+                                                                            {{ 'expiryBeforeRenewal' | translate }}
+                                                                        </div> -->
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-6">
+                                                                
+                                                            </div>
+                                                        </div>
+                                                         <div class="row g-3 mb-3">
+                                                            <div class="col-md-6 ms-auto text-end">
+                                                                <button
+                                                                    class="btn btn-primary waves-effect waves-light"
+                                                                    
+                                                                    >{{'save' | translate}}</button>
+                                                               
+                                                               
+                                                            </div>
+                                                        </div>
+
+                                                      
+                                                    </form>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/user-management/reset-password/reset-password.component.ts b/src/app/user-management/reset-password/reset-password.component.ts
index 10aab01..d29b709 100644
--- a/src/app/user-management/reset-password/reset-password.component.ts
+++ b/src/app/user-management/reset-password/reset-password.component.ts
@@ -1,11 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
 
 @Component({
   selector: 'app-reset-password',
-  imports: [],
+  imports: [TranslateModule, PasswordHideShowComponent],
   templateUrl: './reset-password.component.html',
   styleUrl: './reset-password.component.scss'
 })
 export class ResetPasswordComponent {
+passwordType: string = 'password';
+passwordType1: string = 'password';
+passwordType2: string = 'password';
 
+@ViewChild('psh') passwordHideShow?: PasswordHideShowComponent;
+@ViewChild('psh1') passwordHideShow1 ?: PasswordHideShowComponent;
+@ViewChild('psh2') passwordHideShow2 ?: PasswordHideShowComponent;
+
+togglePasswordType() {
+    this.passwordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
+  }
+ togglePasswordType1() {
+    this.passwordType1 = this.passwordHideShow1?.showPassword ? 'password' : 'text';
+  }
+ togglePasswordType2() {
+    this.passwordType2 = this.passwordHideShow2?.showPassword ? 'password' : 'text';
+  }
 }