diff --git a/edit-mode/function/function.js b/edit-mode/function/function.js
index 0ade620..b292ee2 100644
--- a/edit-mode/function/function.js
+++ b/edit-mode/function/function.js
@@ -14,6 +14,22 @@ function getUrlParameter(sParam) {
 	return false;
 };
 
+const formatNumber = (angka) => {
+  var number_string = angka.replace(/[^,\d]/g, '').toString(),
+  split   		= number_string.split(','),
+  sisa     		= split[0].length % 3,
+  rupiah     		= split[0].substr(0, sisa),
+  ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);
+  var separator = "";
+  if(ribuan){
+    separator = sisa ? '.' : '';
+    rupiah += separator + ribuan.join('.');
+  }
+
+  rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
+  return rupiah
+}
+
 function getCodeLinkByType(type)
 {
 	type = parseInt(type);
@@ -284,6 +300,14 @@ function initialProperty()
 					$("#autoSchedule").prop("checked", true);
 				}
 
+        if(data.committed_cost){
+				  $("#committedCostBox").val(data.committed_cost);
+        }
+
+        if(data.cost_to_complete){
+				  $("#costToCompleteBox").val(data.cost_to_complete);
+        }
+
 				if(data.zoom){
 					gantt.ext.zoom.setLevel(data.zoom);
 					$('input[value="'+data.zoom+'"]').prop("checked", true);
diff --git a/edit-mode/function/ganttSettings.js b/edit-mode/function/ganttSettings.js
index f4c6af0..6b5de2b 100644
--- a/edit-mode/function/ganttSettings.js
+++ b/edit-mode/function/ganttSettings.js
@@ -87,6 +87,8 @@ $(document).ready(function() {
     $('#btn_save_setting').on('click', async function() {
         var holidays = [];
         var dayoff = $('#select_dayoff').val();
+        var costToComplete = $("#costToCompleteBox").val();
+        var committedCost = $("#committedCostBox").val();
 
         dayoff = dayoff.map(item => parseInt(item));
         var workdays = _.difference(days, dayoff);
@@ -103,7 +105,9 @@ $(document).ready(function() {
         }
 
         let payload = {
-            "config_dayoff": dayoff.join(',')
+            "config_dayoff": dayoff.join(','),
+            "cost_to_complete": costToComplete,
+            "committed_cost": committedCost
         }
 
         const result = await axiosInstance
diff --git a/edit-mode/index.html b/edit-mode/index.html
index f1e3651..b4d7bb4 100644
--- a/edit-mode/index.html
+++ b/edit-mode/index.html
@@ -465,6 +465,10 @@
 						<li class="nav-item" role="presentation">
 							<a class="nav-link" id="timeline-tab" data-toggle="tab" href="#timeline" role="tab"
 								aria-controls="timeline" aria-selected="false">Timeline</a>
+						</li>	
+            <li class="nav-item" role="presentation">
+							<a class="nav-link" id="cost-tab" data-toggle="tab" href="#cost" role="tab"
+								aria-controls="cost" aria-selected="false">Cost</a>
 						</li>
 					</ul>
 					<div class="tab-content" id="myTabContent">
@@ -545,6 +549,18 @@
 								</div>
 							</div>
 						</div>
+            <div class="tab-pane fade pt-1" id="cost" role="tabpanel" aria-labelledby="cost-tab">
+							<div class="row">
+								<div class="col-md-6">
+									<label>Cost to Complete</label>
+                  <input type="number" class="form-control" id="costToCompleteBox">
+								</div>
+								<div class="col-md-6">
+									<label>Committed Cost</label>
+                  <input type="number" class="form-control" id="committedCostBox">
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 				<div class="modal-footer">