diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index acdec56..164c182 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -70,11 +70,11 @@
           </div>
           <div class="app-input1">
             <mat-form-field class="app-input2">
-              <input matInput placeholder="Password" type="password" formControlName="password" autocomplete="new-password" [type]="!hide ? 'password' : 'text'">
+              <input matInput placeholder="Password" type="password" formControlName="password" autocomplete="new-password" [type]="passwordField ? 'password' : 'text'">
               <mat-error *ngIf="form.get('password').hasError('required')">
                   Required
                 </mat-error>
-              <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility' }}</mat-icon>
+                <mat-icon matSuffix (click)="togglePasswordField()">{{passwordField ? 'visibility' : 'visibility_off'}}</mat-icon>
             </mat-form-field>
           </div>
           <br>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 69e5038..accd5c4 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -45,6 +45,7 @@
   ];
 
   form: FormGroup;
+  passwordField: boolean = true;
 
   error$: Observable<string>;
 
@@ -99,6 +100,13 @@
       }
     });
   }
+  
+  togglePasswordField() {
+    if (this.passwordField)
+      this.passwordField = false
+    else 
+      this.passwordField = true
+  }
 
   selectLanguage(selectChange: MatSelectChange): void {
     sessionStorage.setItem(TRANSLATE_STORAGE_KEY, selectChange.value);