diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 34fe7af4..08d20ee3 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -477,6 +477,38 @@
                                 </div>
                             </div>
 
+                            <div class="m-form__seperator m-form__seperator--dashed"></div>
+                            <div class="m-form__section" id="sc-section">
+                                <div class="m-form__heading">
+                                    <h3 class="m-form__heading-title">
+                                        Service Charges
+                                    </h3>
+                                </div>
+                                <div class="row m-form__group">
+                                    <div class="col-lg-12">
+                                        <button class="btn btn-primary" id="btn-sc-add">Add Service Charge</button>
+                                    </div>
+                                </div>
+                                <div class="form-group m-form__group row">
+                                    <div class="col-lg-6">
+                                        <div class="col-lg-12 form-group-inner">
+                                            <select class="form-control m-input" name="service_charges[]">
+                                                {% for key, class in sources %}
+                                                    <option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>
+                                                {% endfor %}
+                                            </select>
+                                            <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-5">
+                                        <input class="form-control" type="text" value="0" disabled>
+                                    </div>
+                                    <div class="col-lg-1">
+                                        <button class="btn btn-danger btn-sc-remove">X</button>
+                                    </div>
+                                </div>
+                            </div>
+
                             <div class="m-form__seperator m-form__seperator--dashed"></div>
                             <div class="m-form__section m-form__section--last">
                                 <div class="m-form__heading">
@@ -1607,6 +1639,41 @@ $(function() {
 			});
 		});
 	});
+
+    // service charge add
+    $('#btn-sc-add').click(function(e) {
+        console.log('adding service charge');
+        // add dropdown before the button
+        var html = '<div class="form-group m-form__group row">';
+        html += '<div class="col-lg-6">';
+        html += '<div class="col-lg-12 form-group-inner">';
+        html += '<select class="form-control m-input" id="source" name="source">';
+        {% for key, class in sources %}
+        html += '<option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>';
+        {% endfor %}
+        html += '</select>';
+        html += '<div class="form-control-feedback hide" data-field="mode_of_payment"></div>';
+        html += '</div>';
+        html += '</div>';
+        html += '<div class="col-lg-5">';
+        html += '<input class="form-control" type="text" value="0" disabled>';
+        html += '</div>';
+        html += '<div class="col-lg-1">';
+        html += '<button class="btn btn-danger btn-sc-remove">X</button>';
+        html += '</div>';
+        html += '</div>';
+
+        $('#sc-section').append(html);
+        return false;
+    });
+
+    // service charge remove
+    $('body').on('click', '.btn-sc-remove', function(e) {
+        console.log('removing service charge');
+
+        $(this).closest('.row').remove();
+        return false;
+    });
 });
 </script>
 {% endblock %}