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 9e89334..aa5f149 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
@@ -1,55 +1,55 @@
 <app-loading-panel></app-loading-panel>
 <div class="p-grid card">
-    <div class="p-col-1 label-ailgn">
+    <div class="p-col-6 p-md-1 label-ailgn">
         <label>Design Date</label>
     </div>
-    <div class="p-col-2">
+    <div class="p-col-6 p-md-2">
         <kendo-datepicker [(ngModel)]="selectedSalaryDate" [format]="'dd MMMM yyyy'"
             style="width:100%"></kendo-datepicker>
     </div>
-    <div class="p-col-1">
-        <button icon="refresh" kendoButton [primary]="true" style="width:100%" (click)="Loadlayout()">Refresh</button>
+    <div class="p-col-12 p-md-1" align="right">
+        <button icon="refresh" kendoButton [primary]="true" style="width:fit-content" (click)="Loadlayout()">Refresh</button>
     </div>
-    <div class="p-col-1 label-ailgn" align="right">
+    <div class="p-col-6 p-md-1 label-ailgn">
         <label>Design</label>
     </div>
-    <div class="p-col-3">
+    <div class="p-col-6 p-md-3">
         <!-- <app-dynamic-picker [dynamicPickerView]="_departmentPicker"
             (onSelectCompleted)="SetFromDescription()"></app-dynamic-picker> -->
         <kendo-dropdownlist [data]="filteredProdBSdata" [(ngModel)]="selectedProdBSdata" [filterable]="true"
-            textField="design" valueField="id" style="width:95%" (filterChange)="handleFilter($event)"
+            textField="design" valueField="id" style="width:100%" (filterChange)="handleFilter($event)"
             [defaultItem]="{ design: 'Select layout no..'}" (valueChange)="loadLines($event)">
         </kendo-dropdownlist>
     </div>
-    <!-- <div class="p-col-2">
+    <!-- <div class="p-col-6 p-md-2">
     </div> -->
-    <div class="p-col-1 label-ailgn" align="right">
+    <div class="p-col-6 p-md-1 label-ailgn">
         <label>Line Name</label>
     </div>
 
-    <div class="p-col-3">
+    <div class="p-col-6 p-md-3">
         <kendo-dropdownlist [data]="productionBonusSetup.productionBonusLines" [(ngModel)]="selectedLine"
             textField="lineName" valueField="id" [defaultItem]="{ lineName: 'Select Line..'}" style="width:100%">
         </kendo-dropdownlist>
     </div>
 
-    <div class="p-col-6 label-ailgn" *ngIf="showScheduleDate">
+    <div class="p-col-12 p-md-3 label-ailgn" *ngIf="showScheduleDate">
         <!-- <div class="p-grid">
-            <div class="p-col-3 label-ailgn">
+            <div class="p-col-6 p-md-3 label-ailgn">
                 <label>Schedule Date From</label>
             </div>
-            <div class="p-col-4">
+            <div class="p-col-6 p-md-4">
                 <kendo-datepicker [(ngModel)]="productionBonusSetup.fromDate" [format]="'dd MMMM yyyy'"
                     style="width:100%" [readonly]="true"></kendo-datepicker>
             </div>
-            <div class="p-col-1 label-ailgn">
+            <div class="p-col-6 p-md-1 label-ailgn">
                 <label>Upto</label>
             </div>
-            <div class="p-col-4">
+            <div class="p-col-6 p-md-4">
                 <kendo-datepicker [(ngModel)]="productionBonusSetup.toDate" [format]="'dd MMMM yyyy'" style="width:100%"
                     [readonly]="true"></kendo-datepicker>
             </div>
-            <div class="p-col-12 label-ailgn"></div>
+            <div class="p-col-6 p-md-12 label-ailgn"></div>
         </div> -->
         <p style="color: red; font-style: italic;">Select Schedule Date Betweeen {{productionBonusSetup.fromDate | date:
             'dd MMMM yyyy'}} and
@@ -58,18 +58,33 @@
 
 
     </div>
+<!-- 
+    <div class="p-col-6 p-md-6" *ngIf="!showScheduleDate">
+    </div> -->
 
-    <div class="p-col-6" *ngIf="!showScheduleDate">
-    </div>
-
-    <div class="p-col-2 label-ailgn" align="right">
+    <div class="p-col-6 p-md-1 label-ailgn">
         <label>Schedule Date</label>
     </div>
-    <div class="p-col-2">
+    <div class="p-col-6 p-md-2">
         <kendo-datepicker [(ngModel)]="selectedDate" [format]="'dd MMMM yyyy'" style="width:100%"></kendo-datepicker>
     </div>
-    <div class="p-col-2" align="right">
-        <button icon="refresh" kendoButton [primary]="true" style="width:80%" (click)="onClickRefresh()"
+
+    <div class="p-col-6 p-md-1 label-ailgn">
+        <label>In Time</label>
+    </div>
+    <div class="p-col-6 p-md-2">
+        <kendo-timepicker [(ngModel)]="startTime" style="width:100%"></kendo-timepicker>
+    </div>
+
+    <div class="p-col-6 p-md-1 label-ailgn">
+        <label>Out Time</label>
+    </div>
+    <div class="p-col-6 p-md-2">
+        <kendo-timepicker [(ngModel)]="endTime" style="width:100%"></kendo-timepicker>
+    </div>
+
+    <div class="p-col-12" align="right">
+        <button icon="refresh" kendoButton [primary]="true" style="width: fit-content" (click)="onClickRefresh()"
             [disabled]="selectedProdBSdata===undefined||selectedLine===undefined||selectedDate===undefined">Refresh</button>
     </div>
     <div class="p-col-12">
@@ -110,8 +125,8 @@
     </div>
     <div class="p-col-4">
         <app-employee-picker (ItemSelected)="GetSelectedEmployee($event)"
-            [MultiSelect]="employeeSelection==='commonEmployee'"></app-employee-picker>
-        <!-- [setSelectedEmp]="_pickerSelecteEmp" [isActive]="empPickerActive" -->
+            [MultiSelect]="false"></app-employee-picker>
+            <!-- [MultiSelect]="employeeSelection==='commonEmployee'"></app-employee-picker> -->
     </div>
     <div class="p-col-2"></div>
     <div class="p-col-2" align="right">
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 7636440..64abb7a 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
@@ -44,6 +44,9 @@ export class ProductionBonusAttendanceComponent implements OnInit {
 
   selectedDate: Date = new Date;
 
+  startTime: Date;
+  endTime: Date;
+
   selectedSalaryDate: Date = new Date();
 
   showScheduleDate: boolean;
@@ -343,8 +346,27 @@ export class ProductionBonusAttendanceComponent implements OnInit {
   //   );
   // }
   onClickSubmit() {
-    console.log(this.prodBonusAttn);
+    // console.log(this.prodBonusAttn);
     debugger;
+    if (this.startTime == undefined || this.endTime == undefined) {
+      this.notificationService.showWarning('Please Select In/Out Time');
+      return;
+    }
+
+    this.prodBonusAttn.forEach(element => {
+      let inTime = new Date(element.inTime);
+      inTime.setHours(this.startTime.getHours());
+      inTime.setMinutes(this.startTime.getMinutes());
+      inTime.setSeconds(this.startTime.getSeconds());
+      element.inTime = inTime;
+
+      let outTime = new Date(element.outTime);
+      outTime.setHours(this.endTime.getHours());
+      outTime.setMinutes(this.endTime.getMinutes());
+      outTime.setSeconds(this.endTime.getSeconds());
+      element.outTime = outTime;
+    });
+
     const data = {
       prodBonusAttn: this.prodBonusAttn,
       setupId: this.productionBonusSetup.id,