diff --git a/edit-mode/function/expenseResource.js b/edit-mode/function/expenseResource.js
index 55dd594..ca2ddf1 100644
--- a/edit-mode/function/expenseResource.js
+++ b/edit-mode/function/expenseResource.js
@@ -89,11 +89,11 @@ $(document).ready(function () {
 
     $('#modal-expense').on('show.bs.modal', function (event) {
         $('#modal-expense-title').html("Overhead " + activityName);
+        $('#modal-expense-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableexpense.draw();
     });
 
     $('#modal-expense').on('hide.bs.modal', function (event) {
-        // $("#hide-form-expense").hide();
         $("#show-form-expense").show();
         console.log("there's before action change ", actionHappen);
         if (actionHappen) {
diff --git a/edit-mode/function/ganttActivityUploadDoc.js b/edit-mode/function/ganttActivityUploadDoc.js
index e88db40..ecfbc0a 100644
--- a/edit-mode/function/ganttActivityUploadDoc.js
+++ b/edit-mode/function/ganttActivityUploadDoc.js
@@ -1,6 +1,6 @@
 // Upload Document Activity
 const DOCUMENT_UPLOAD_URL = `${base_url}document-activity/upload`;
-const DOCUMENT_DOWNLOAD_URL = (id) => `${base_url}document-activity/download/${id}/${company_id}`;
+const DOCUMENT_DOWNLOAD_URL = (id, company_id) => `${base_url}document-activity/download/${id}/${company_id}`;
 const DOCUMENT_SEARCH_URL = `${base_url}document-activity/search`;
 const DOCUMENT_DELETE_URL = (id, company_id) => `${base_url}document-activity/delete/${id}/${company_id}`;
 
diff --git a/edit-mode/function/humanResource.js b/edit-mode/function/humanResource.js
index 75174f6..bf1837c 100644
--- a/edit-mode/function/humanResource.js
+++ b/edit-mode/function/humanResource.js
@@ -76,6 +76,10 @@ $(document).ready(function () {
     });
 
     $('#modal-hr').on('show.bs.modal', function (event) {
+        $('#modal-hr-title').html("Human Resource " + activityName);
+        $('#modal-hr-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
+        $('#modal-hr-time-startDate').html("Minimum from " + moment(activityEarlyStart).format('MM-DD-YYYY'));
+        $('#modal-hr-time-endDate').html("Maximum from " + moment(activityEarlyFinish).format('MM-DD-YYYY'));
         tableHr.draw();
     });
 
@@ -83,7 +87,6 @@ $(document).ready(function () {
         $("#hide-form-hr").hide();
         $("#show-form-hr").show();
         if (actionHappen) {
-            console.log("there's action change");
             updateActivity(activityId);
         }
         resetFormAssign();
diff --git a/edit-mode/function/materialResource.js b/edit-mode/function/materialResource.js
index c865919..4c5d0fd 100644
--- a/edit-mode/function/materialResource.js
+++ b/edit-mode/function/materialResource.js
@@ -90,6 +90,7 @@ $(document).ready(function () {
 
     $('#modal-material').on('show.bs.modal', function (event) {
         $('#modal-material-title').html("Material Resource " + activityName);
+        $('#modal-material-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableMaterial.draw();
     });
 
diff --git a/edit-mode/function/reportActivity.js b/edit-mode/function/reportActivity.js
index 54168fd..e9a837e 100644
--- a/edit-mode/function/reportActivity.js
+++ b/edit-mode/function/reportActivity.js
@@ -298,6 +298,7 @@ $(document).ready(function () {
 
     $('#modal_report_activity').on('show.bs.modal', function (event) {
         $("#report_activity_title").html(`Report Activity ${activityName}`)
+        $('#report_activity_sub_title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableRa.draw();
     });
 
diff --git a/edit-mode/function/toolsResource.js b/edit-mode/function/toolsResource.js
index 3b7adce..e1dc62a 100644
--- a/edit-mode/function/toolsResource.js
+++ b/edit-mode/function/toolsResource.js
@@ -62,7 +62,8 @@ $(document).ready(function () {
     });
 
     $('#modal-tools').on('show.bs.modal', function (event) {
-        console.log('activityId', activityId);
+        $('#modal-tools-title').html("Tools Resource " + activityName);
+        $('#modal-tools-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableTools.draw();
     });
 
diff --git a/edit-mode/index.html b/edit-mode/index.html
index 02ca264..57bb422 100644
--- a/edit-mode/index.html
+++ b/edit-mode/index.html
@@ -123,8 +123,9 @@
 	<div class="modal fade" id="modal-hr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
-					<h5 class="modal-title" id="exampleModalLabel">Human Resource</h5>
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
+					<h5 class="modal-title" id="modal-hr-title">Human Resource</h5>
+					<h6 id="modal-hr-sub-title"></h6>
 					<div>
 						<!-- <button id="show-form-hr" type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"
 								aria-hidden="true"></i></button>
@@ -146,24 +147,19 @@
 							<div class="col-md-2 form-group">
 								<label>Start Date</label>
 								<input type="date" id="hr-start-date" class="form-control form-control-sm" />
+								<small style="color: #f75b5b;" id="modal-hr-time-startDate"></small>
 							</div>
 							<div class="col-md-2 form-group">
 								<label>End Date</label>
 								<input type="date" id="hr-end-date" class="form-control form-control-sm" />
+								<small style="color: #f75b5b;" id="modal-hr-time-endDate"></small>
 							</div>
 							<div class="col-md-1 form-group">
 								<button style="margin-top: 31px;" id="btn-assign-hr" type="submit"
 									class="btn btn-sm btn-primary">Assign</button>
 							</div>
 							<input type="hidden" id=hr_role />
-							<!-- <div class="col-md-6 form-group">
-								<label>Project Role Resource</label>
-								<select id="select-role-hr" name="role_proyek_id" class="form-control form-control-sm" style="width:100%;"></select>
-							</div> -->
 						</div>
-						<!-- <div class="text-right">
-							<button id="btn-assign-hr" type="submit" class="btn btn-sm btn-primary">Assign</button>
-						</div> -->
 						<hr />
 					</form>
 					<table id="table-hr" class="table table-sm" style="width: 100%;">
@@ -283,10 +279,9 @@
 	<div class="modal fade" id="modal-material" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
 					<h5 class="modal-title" id="modal-material-title">Material Resource</h5>
-					<div>
-					</div>
+					<h6 id="modal-material-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<form id="form-assign-material">
@@ -301,28 +296,28 @@
 								<input type="text" id="price-req-material" name="priceReqMaterial"
 									class="form-control form-control-sm" />
 							</div>
-							<div class="col-md-2 form-group">
+							<div class="col-md-1 form-group">
 								<label>QTY</label>
 								<input type="text" id="qty-req-material" name="qtyReqMaterial"
 									class="form-control form-control-sm" />
 							</div>
-							<div class="col-md-1 form-group">
-								<label>UOM</label>
-								<select id="uom-req-material" name="uomReqMaterial"
-									class="form-control form-control-sm"></select>
+							<div class="col-md-2 form-group">
+								<label class="d-block">UOM</label>
+								<select id="uom-req-expense" name="uomReqexpense"
+									class="form-control form-control-sm" style="width: 100% !important;"></select>
 							</div>
 							<div class="col-md-2 form-group">
-								<label>Expected arrival date</label>
+								<label>Expected Arrival Date</label>
 								<input type="date" id="required-date-req-material" name="requiredDateReqMaterial"
 									class="form-control form-control-sm" />
 							</div>
 							<div class="col-md-2 form-group">
-								<label>Will be used at</label>
+								<label>Will Be Used At</label>
 								<input type="date" id="required-date-plan-material" name="requiredDatePlanMaterial"
 									class="form-control form-control-sm" />
 							</div>
 							<div class="col-md-1 form-group">
-								<button style="margin-top: 31px;" id="btn-assign-material" type="submit"
+								<button style="margin-top: 31px; width: 100% !important;" id="btn-assign-material" type="submit"
 									class="btn btn-sm btn-primary">Assign</button>
 							</div>
 						</div>
@@ -353,8 +348,9 @@
 	<div class="modal fade" id="modal-expense" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
 					<h5 class="modal-title" id="modal-expense-title">Expense</h5>
+					<h6 id="modal-expense-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<form id="form-assign-expense">
@@ -369,28 +365,28 @@
 								<input type="text" id="price-req-expense" name="priceReqexpense"
 									class="form-control form-control-sm" />
 							</div>
-							<div class="col-md-2 form-group">
+							<div class="col-md-1 form-group">
 								<label>QTY</label>
 								<input type="text" id="qty-req-expense" name="qtyReqexpense"
 									class="form-control form-control-sm" />
 							</div>
-							<div class="col-md-1 form-group">
-								<label>UOM</label>
+							<div class="col-md-2 form-group">
+								<label class="d-block">UOM</label>
 								<select id="uom-req-expense" name="uomReqexpense"
-									class="form-control form-control-sm"></select>
+									class="form-control form-control-sm" style="width: 100% !important;"></select>
 							</div>
 							<div class="col-md-2 form-group">
-								<label>Expected arrival date</label>
+								<label>Expected Arrival Date</label>
 								<input type="date" id="required-date-req-expense" name="requiredDateReqexpense"
 									class="form-control form-control-sm" />
 							</div>
 							<div class="col-md-2 form-group">
-								<label>Will be used at</label>
+								<label>Will Be Used At</label>
 								<input type="date" id="required-date-plan-expense" name="requiredDatePlanexpense"
 									class="form-control form-control-sm" />
 							</div>
 							<div class="col-md-1 form-group">
-								<button style="margin-top: 31px;" id="btn-assign-expense" type="submit"
+								<button style="margin-top: 31px; width: 100% !important;" id="btn-assign-expense" type="submit"
 									class="btn btn-sm btn-primary">Assign</button>
 							</div>
 						</div>
@@ -422,10 +418,9 @@
 	<div class="modal fade" id="modal-tools" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
-					<h5 class="modal-title" id="exampleModalLabel">Tools Resource</h5>
-					<div>
-					</div>
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
+					<h5 class="modal-title" id="modal-tools-title">Tools Resource</h5>
+					<h6 id="modal-tools-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<form id="form-assign-tools">
@@ -651,7 +646,10 @@
 		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
 				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
-					<h5 class="modal-title" id="report_activity_title">Report Activity</h5>
+					<div class="d-flex flex-column">
+						<h5 class="modal-title" id="report_activity_title">Report Activity</h5>
+						<h6 id="report_activity_sub_title"></h6>
+					</div>
 					<div>
 						<button id="show_form_ra" type="button" class="success btn btn-success btn-sm btn-update-status"
 							data-toggle="tooltip" title="Input Update Status" data-placement="top" aria-hidden="true"><i
diff --git a/view-mode/function/ganttActivityUploadDoc.js b/view-mode/function/ganttActivityUploadDoc.js
index 06706e9..0490d4e 100644
--- a/view-mode/function/ganttActivityUploadDoc.js
+++ b/view-mode/function/ganttActivityUploadDoc.js
@@ -1,6 +1,6 @@
 // Upload Document Activity
 const DOCUMENT_UPLOAD_URL = `${base_url}document-activity/upload`;
-const DOCUMENT_DOWNLOAD_URL = (id) => `${base_url}document-activity/download/${id}/${company_id}`;
+const DOCUMENT_DOWNLOAD_URL = (id, company_id) => `${base_url}document-activity/download/${id}/${company_id}`;
 const DOCUMENT_SEARCH_URL = `${base_url}document-activity/search`;
 const DOCUMENT_DELETE_URL = (id, company_id) => `${base_url}document-activity/delete/${id}/${company_id}`;
 
diff --git a/view-mode/function/humanResource.js b/view-mode/function/humanResource.js
index 3b0bea7..ead8a8d 100644
--- a/view-mode/function/humanResource.js
+++ b/view-mode/function/humanResource.js
@@ -43,6 +43,8 @@ $(document).ready(function () {
 	});
 
 	$('#modal-hr').on('show.bs.modal', function (event) {
+		$('#modal-hr-title').html("Human Resource " + activityName);
+        $('#modal-hr-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
 		tableHr.draw();
 	});
 
diff --git a/view-mode/function/materialResource.js b/view-mode/function/materialResource.js
index c43d7a1..5ad3d4e 100644
--- a/view-mode/function/materialResource.js
+++ b/view-mode/function/materialResource.js
@@ -55,6 +55,7 @@ $(document).ready(function () {
 
 	$('#modal-material').on('show.bs.modal', function (event) {
 		$('#modal-material-title').html("Material Resource " + activityName);
+		$('#modal-material-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
 		tableMaterial.draw();
 	});
 
diff --git a/view-mode/function/reportActivity.js b/view-mode/function/reportActivity.js
index 91ed799..684e83a 100644
--- a/view-mode/function/reportActivity.js
+++ b/view-mode/function/reportActivity.js
@@ -136,6 +136,7 @@ $(document).ready(function () {
 
     $('#modal_report_activity').on('show.bs.modal', function (event) {
         $("#report_activity_title").html(`Report Activity ${activityName}`)
+        $('#report_activity_sub_title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableRa.draw();
     });
 
diff --git a/view-mode/function/restActivityLink.js b/view-mode/function/restActivityLink.js
index 21bc736..06a6b18 100644
--- a/view-mode/function/restActivityLink.js
+++ b/view-mode/function/restActivityLink.js
@@ -22,7 +22,6 @@ gantt.ajax.get({
     let obj = JSON.parse(response);
     data['data'] = obj.data.data;
     data['links'] = obj.data.links;
-    // console.log("data parse wrong", data);
     // check if baseline has been set
     if (data.data && data.data.length > 0) {
         console.log('baseline', data.data[0].planned_start);
diff --git a/view-mode/function/toolsResource.js b/view-mode/function/toolsResource.js
index 7da7aa2..fcc4ee9 100644
--- a/view-mode/function/toolsResource.js
+++ b/view-mode/function/toolsResource.js
@@ -56,7 +56,8 @@ $(document).ready(function () {
     });
 
     $('#modal-tools').on('show.bs.modal', function (event) {
-        console.log('activityId', activityId);
+        $('#modal-tools-title').html("Tools Resource " + activityName);
+        $('#modal-tools-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date ${moment(activityEarlyStart).format('MM-DD-YYYY')} - ${moment(activityEarlyFinish).format('MM-DD-YYYY')}</p>`);
         tableTools.draw();
     });
 
diff --git a/view-mode/index.html b/view-mode/index.html
index 76d766c..bf3960b 100644
--- a/view-mode/index.html
+++ b/view-mode/index.html
@@ -100,8 +100,9 @@
 	<div class="modal fade" id="modal-hr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
-					<h5 class="modal-title" id="exampleModalLabel">Human Resource</h5>
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
+					<h5 class="modal-title" id="modal-hr-title">Human Resource</h5>
+					<h6 id="modal-hr-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<table id="table-hr" class="table table-sm" style="width: 100%;">
@@ -185,8 +186,9 @@
 	<div class="modal fade" id="modal-material" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
 					<h5 class="modal-title" id="modal-material-title">Material Resource</h5>
+					<h6 id="modal-material-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<table id="table-material" class="table table-sm" style="width: 100%;">
@@ -216,6 +218,7 @@
 			<div class="modal-content">
 				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
 					<h5 class="modal-title" id="exampleModalLabel">Tools Resource</h5>
+					<h6 id="modal-tools-sub-title"></h6>
 				</div>
 				<div class="modal-body">
 					<table id="table-tools" class="table table-sm" style="width: 100%;">
@@ -317,7 +320,10 @@
 		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
 				<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;">
-					<h5 class="modal-title" id="report_activity_title">Report Activity</h5>
+					<div class="d-flex flex-column">
+						<h5 class="modal-title" id="report_activity_title">Report Activity</h5>
+						<h6 id="report_activity_sub_title"></h6>
+					</div>
 					<div>
 						<button id="show_form_ra" type="button" class="success btn btn-success btn-sm btn-update-status"
 							data-toggle="tooltip" title="Input Update Status" data-placement="top" aria-hidden="true"><i