diff --git a/edit-mode/index.html b/edit-mode/index.html
index ce9dc8c..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%;">
+				<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%;">
+				<div class="modal-header d-flex flex-column" style="width: 100%;">
 					<h5 class="modal-title" id="modal-tools-title">Tools Resource</h5>
-					<div>
-					</div>
+					<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/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