diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 1d803f55..081de569 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -15,20 +15,21 @@
                     <mat-form-field class="input-field" appearance="outline">
                         <mat-label>Username</mat-label>
                         <input formControlName="usernameId" matInput placeholder="Username" value="">
+                        <mat-error class="error" *ngIf="loginForm.get('usernameId')?.hasError('required')">invalid username</mat-error>
                     </mat-form-field>
                 </div>
             </div>
             <div class="align-middle flex-row">
                 <div class="align-middle">
-                    <mat-form-field class="input-field" appearance="outline">
+                    <mat-form-field class="input-field" type="password" appearance="outline">
                         <mat-label>Password</mat-label>
-                        <input formControlName="passwwordId" matInput placeholder="passwordId" value="">
+                        <input formControlName="passwwordId"  matInput placeholder="passwordId" value="" >
+                        <mat-error class="error" *ngIf="loginForm.get('passwwordId')?.hasError('required')">invalid password</mat-error>
                     </mat-form-field>
                 </div>
             </div>
             <div class="align-middle flex-row">
-                <button mat-raised-button color="primary" (click)="loginHandler()">Sign In</button>
-                <!-- downloadPDF -->
+                <button mat-raised-button color="primary">Sign In</button>
             </div>
         </div>
     </form>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index 256cb451..25c07368 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -1,77 +1,63 @@
 #login-screen {
-    // background: rgb(250,250,250);
-    // background: linear-gradient(283deg, rgba(250,250,250,1) 0%, rgba(226,189,43,1) 1%, rgba(34,158,194,1) 81%, rgba(3,151,198,1) 100%);
-    //     background: rgb(34,193,195);
-    // background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
-
     background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
-    .content{
-        padding:5%
-    }
-    .icon {
-        width: 70%;
-        height: 70%;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        padding: 30% 5%;
-    }
-    button {
-        border-radius: 10px;
-        font-size: 0.938rem;
-        width: 100%;
-        background: #22138B 0 0 no-repeat padding-box !important;
-        margin: 2%;
-      }
-      .flex-row {
-        flex-direction: row;
-        display: flex;
-        width: 100%;
-    }
-    .font-body-medium {
-        font-size: 1.25rem;
-        line-height: 1.125rem;
-        letter-spacing: 1px;
-        font-family: "Raleway VariableFont";
-        text-transform: uppercase;
-      }
-    
-      ::ng-deep .mat-form-field-outline-start {
-        border-radius: 0.5rem 0 0 0.5rem !important;
-        min-width: 0.5rem !important;
-      }
-      
-      ::ng-deep .mat-form-field-outline-end {
-        border-radius: 0 0.5rem 0.5rem 0 !important;
-      }
-
-      ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-        background-color: #E0E9F8;
-        border-radius: 0.5rem;
-      }
-    
-    .align-middle{
-       width: 100%;
-       text-align: center;
-    }
-    .title{
-        color:#ffffff;
-        font-weight: bold;
-        font-size: 1.563rem;
-        margin-bottom: 15%;
-        font-family: "Raleway VariableFont";
-        text-transform: uppercase;
-    }
-   .input-field {
-        width: 100%;
-      }
 }
-
-
-// #login-screen ::ng-deep .mat-form-field-underline, #generateLetter ::ng-deep .mat-form-field-ripple{
-//     background-color: '#E0E9F8';
-// }
-
-// ::ng-deep .mat-form-field-underline, #addDependants ::ng-deep .mat-form-field-ripple {
-//     background-color: #E0E9F8 !important;
-//   }
\ No newline at end of file
+#login-screen .content {
+    padding: 5%;
+}
+#login-screen .icon {
+    width: 70%;
+    height: 70%;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: 30% 5%;
+}
+#login-screen button {
+    border-radius: 10px;
+    font-size: 0.938rem;
+    width: 100%;
+    background: #22138b 0 0 no-repeat padding-box !important;
+    margin: 2%;
+}
+#login-screen .flex-row {
+    flex-direction: row;
+    display: flex;
+    width: 100%;
+}
+#login-screen .font-body-medium {
+    font-size: 1.25rem;
+    line-height: 1.125rem;
+    letter-spacing: 1px;
+    font-family: "Raleway VariableFont";
+    text-transform: uppercase;
+}
+#login-screen ::ng-deep .mat-form-field-outline-start {
+    border-radius: 0.5rem 0 0 0.5rem !important;
+    min-width: 0.5rem !important;
+}
+#login-screen ::ng-deep .mat-form-field-outline-end {
+    border-radius: 0 0.5rem 0.5rem 0 !important;
+}
+#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+    background-color: #e0e9f8;
+    border-radius: 0.5rem;
+}
+#login-screen .align-middle {
+    width: 100%;
+    text-align: center;
+}
+#login-screen .title {
+    color: #fff;
+    font-weight: bold;
+    font-size: 1.563rem;
+    margin-bottom: 15%;
+    font-family: "Raleway VariableFont";
+    text-transform: uppercase;
+}
+#login-screen .input-field {
+    width: 100%;
+}
+#login-screen .error {
+    color: #fff;
+    font-size: 1rem;
+}
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 3e7c5edc..682935b4 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -12,6 +12,10 @@ export class LoginComponent implements OnInit {
   loginForm!: FormGroup;
   username:string ='';
   password:string = '';
+  userObject = {
+    username:'',
+    password:''
+  }
 
   constructor( private formBuilder: FormBuilder) { }
 
@@ -21,8 +25,8 @@ export class LoginComponent implements OnInit {
 
   initFormControls(){
     this.loginForm = this.formBuilder.group({
-      usernameId: [{ value: '', disabled: false }],
-      passwwordId: [{ value: '', disabled: false }]
+      usernameId: ['',[Validators.required]],
+      passwwordId: ['', [Validators.required]]
     });
   }
 
@@ -30,4 +34,15 @@ export class LoginComponent implements OnInit {
     this.username = this.loginForm?.get("usernameId")?.value;
     this.password = this.loginForm?.get("passwwordId")?.value;
   }
-}
+
+  validateCredentials(){
+    if(this.username.length <=0){
+      this.userObject.username = 'invalid';
+      console.log('invalid username');
+    }
+    if(this.password.length <=0){
+      this.userObject.password = 'invalid';
+      console.log('invalid password');
+    }
+  }
+}
\ No newline at end of file