diff --git a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.html b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.html
index aa5f149..df10fd6 100644
--- a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.html
+++ b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.html
@@ -88,9 +88,9 @@
             [disabled]="selectedProdBSdata===undefined||selectedLine===undefined||selectedDate===undefined">Refresh</button>
     </div>
     <div class="p-col-12">
-        <kendo-grid [data]="employeeList" [pageable]="true" [sortable]="true" [reorderable]="true" [resizable]="true">
+        <kendo-grid #grid [data]="employeeList" [pageable]="true" [sortable]="true" [reorderable]="true" [resizable]="true" [height]="450">
             <ng-template kendoGridToolbarTemplate>
-                <button type="button" kendoButton [primary]="true" icon="delete">
+                <button type="button" kendoButton icon="delete" class="kt-delete">
                     Remove All
                 </button>
                 <kendo-grid-spacer></kendo-grid-spacer>
@@ -107,7 +107,7 @@
             </kendo-grid-column>
             <kendo-grid-column title="Actions" width="25%" align="middle">
                 <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
-                    <button kendoButton icon="delete" [primary]="true" style="width: 30%;"
+                    <button kendoButton class="kt-delete" icon="delete" style="width: fit-content;"
                         (click)="onClickRemove(dataItem)">Remove</button>
                 </ng-template>
             </kendo-grid-column>
@@ -124,8 +124,8 @@
         <kendo-label [for]="supervisor" text=" Supervisor"></kendo-label>
     </div>
     <div class="p-col-4">
-        <app-employee-picker (ItemSelected)="GetSelectedEmployee($event)"
-            [MultiSelect]="false"></app-employee-picker>
+        <app-employee-picker (ItemSelected)="GetSelectedEmployee($event)" [setSelectedEmp]="selectedEmps"
+            [MultiSelect]="false" (keydown)="onKeyDown($event)"></app-employee-picker>
             <!-- [MultiSelect]="employeeSelection==='commonEmployee'"></app-employee-picker> -->
     </div>
     <div class="p-col-2"></div>
diff --git a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.scss b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.scss
index 6396e97..5927558 100644
--- a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.scss
+++ b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.scss
@@ -1,3 +1,9 @@
 .label-ailgn{
     padding-top: 12px;
+}
+.k-grid {
+    font-size: smaller;
+}
+.kt-delete {
+    font-size: smaller;
 }
\ No newline at end of file
diff --git a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.ts b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.ts
index 64abb7a..3e7feac 100644
--- a/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.ts
+++ b/HRM.UI/ClientApp/src/app/payroll-ot/production-bonus-attendance/production-bonus-attendance.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { HrEmployee } from '../../_models/HREmployee/hrEmployee';
 import { SearchEmployee } from '../../_models/Employee/searchEmployee';
@@ -19,6 +19,7 @@ import { ProdBonusAttn } from 'src/app/_models/Payroll/ProductionBonus/prodBonus
 import { EnumBonusItemType, EnumProductionBonusType } from 'src/app/_models/enums';
 import { ProdBonusParameter } from 'src/app/_models/Payroll/ProductionBonus/prodBonusParameter';
 import { error } from 'console';
+import { GridComponent } from '@progress/kendo-angular-grid';
 
 
 @Component({
@@ -232,35 +233,36 @@ export class ProductionBonusAttendanceComponent implements OnInit {
   }
   onClickAdd() {
     // console.log(this.employeeSelection);
+    debugger;
     if (this.selectedEmps === undefined) {
       this.notificationService.showWarning('Please Select an Employee');
       return;
     }
-    if (this.employeeSelection === 'commonEmployee') {
-      if (this.selectedEmps !== null || this.selectedEmps !== undefined) {
-        // console.log(this.selectedEmps);
-        // console.log(this.employeeList);
-        // for (let i = 0; i < this.selectedEmps.length; i++) {
-        //   this.AddEmployeebyId(this.selectedEmps[i].employeeID);
-        // }
-        for (let i = 0, isNew = true; i < this.selectedEmps.length; i++, isNew = true) {
-          for (let j = 0; j < this.employeeList.length; j++) {
-            if (this.selectedEmps[i].employeeID == this.employeeList[j].id) {
-              this.notificationService.showWarning("EmployeeNo " + this.employeeList[j].employeeNo + " Already Exists");
-              isNew = false;
-              break;
-            }
-          }
-          if (isNew) {
-            this.AddEmployeebyId(this.selectedEmps[i].employeeID);
-            this.AddEmployeeGridData(this.selectedEmps[i].employeeID, true);
-          }
+    // if (this.employeeSelection === 'commonEmployee') {
+    //   if (this.selectedEmps !== null || this.selectedEmps !== undefined) {
+    //     // console.log(this.selectedEmps);
+    //     // console.log(this.employeeList);
+    //     // for (let i = 0; i < this.selectedEmps.length; i++) {
+    //     //   this.AddEmployeebyId(this.selectedEmps[i].employeeID);
+    //     // }
+    //     for (let i = 0, isNew = true; i < this.selectedEmps.length; i++, isNew = true) {
+    //       for (let j = 0; j < this.employeeList.length; j++) {
+    //         if (this.selectedEmps[i].employeeID == this.employeeList[j].id) {
+    //           this.notificationService.showWarning("EmployeeNo " + this.employeeList[j].employeeNo + " Already Exists");
+    //           isNew = false;
+    //           break;
+    //         }
+    //       }
+    //       if (isNew) {
+    //         this.AddEmployeebyId(this.selectedEmps[i].employeeID);
+    //         this.AddEmployeeGridData(this.selectedEmps[i].employeeID, true);
+    //       }
 
-          debugger;
-        }
-      }
-    }
-    else {
+    //       debugger;
+    //     }
+    //   }
+    // }
+    // else {
       let sid: number;
       const emp = this.employeeList.find((e1) => e1.id === this.selectedEmps['employeeID']);
       const att = this.prodBonusAttn.find((e1) => e1.employeeID === this.selectedEmps['employeeID']);
@@ -288,7 +290,7 @@ export class ProductionBonusAttendanceComponent implements OnInit {
       else {
         this.notificationService.showWarning('Employee already exist ! Can\'t Add');
       }
-    }
+    // }
   }
   AddEmployeebyId(empId: number) {
     this.loadingPanelService.ShowLoadingPanel = true;
@@ -323,9 +325,8 @@ export class ProductionBonusAttendanceComponent implements OnInit {
       isCommon: isCommonValue
     };
     this.prodBonusAttn.push(newProdBonusAttn);
-    console.log('emplist ' + this.employeeList.length + '\n PbAttn ' + this.prodBonusAttn.length);
-    debugger;
-
+    // console.log('emplist ' + this.employeeList.length + '\n PbAttn ' + this.prodBonusAttn.length);
+    this.selectedEmps = undefined;
   }
   // GetSelectedEmployee(sremployee: SearchEmployee) {
   //   if (sremployee === undefined) {
@@ -407,4 +408,24 @@ export class ProductionBonusAttendanceComponent implements OnInit {
     this.employeeList = [];
     this.selectedLine = undefined;
   }
+
+  public onKeyDown(pressedKey) {
+    if (pressedKey.key==="Enter") {
+      // this.onSave(pressedKey);
+      this.onClickAdd();
+      this.scrollToBottom();
+    }
+  }
+
+  @ViewChild('grid', { static: true })
+  public grid: GridComponent;
+
+  private gridScrollableElement: HTMLElement;
+
+  ngAfterViewInit() {
+    this.gridScrollableElement = this.grid.wrapper.nativeElement.querySelector('.k-grid-content');
+  }
+  scrollToBottom(): void {
+    this.gridScrollableElement.scrollTop = this.gridScrollableElement.scrollHeight;
+  }
 }