diff --git a/resources/assets/vue/components/companies/elements/SupplierComponent.vue b/resources/assets/vue/components/companies/elements/SupplierComponent.vue
index 6b2961c2..8f0090fd 100644
--- a/resources/assets/vue/components/companies/elements/SupplierComponent.vue
+++ b/resources/assets/vue/components/companies/elements/SupplierComponent.vue
@@ -34,15 +34,33 @@
                         </div>
                     </div>
                 </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">Service Charge</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps fs-10">0.00</div>
+                        </div>
+                    </div>
+                </div>
                 <div class="col-auto">
                     <div class="row">
                         <div class="col">
+                            <button class="btn btn-xs btn-outline-warning b-rad-none m-r-5 requestModal" data-type="editServiceCharge">
+                                <i class="fa fa-pencil"></i>
+                            </button>
                             <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteSupplier">
                                 <i class="fa fa-times"></i>
                             </button>
                             <button class="btn btn-xs btn-complete p-l-10 p-r-10 b-rad-none" @click="expanded = !expanded">
                                 <i class="fa" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
                             </button>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" type="editServiceCharge">
+                                <supplier-service-charge-form-component :details="item" :defaultCharge="null" section="suppliersServiceChargeSection"></supplier-service-charge-form-component>
+                            </modal-component>
                             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteSupplier">
                                 <delete-supplier-form-component :data="item" section="suppliersSection" class="text-center"></delete-supplier-form-component>
                             </modal-component>
diff --git a/resources/assets/vue/components/companies/forms/SupplierServiceChargeFormComponent.vue b/resources/assets/vue/components/companies/forms/SupplierServiceChargeFormComponent.vue
new file mode 100644
index 00000000..74c02a91
--- /dev/null
+++ b/resources/assets/vue/components/companies/forms/SupplierServiceChargeFormComponent.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h6 class="all-caps m-b-5 bold no-margiPsn">Edit Service Charge</h6>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.amount">
+                                <label>Service Charge %</label>
+                                <input type="text" class="form-control" v-model="parameters.detail.service_charge.amount" v-money="exchangeRate">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required, requiredIf } from "vuelidate/lib/validators";
+    export default {
+        props: {
+            details: {
+                type: Object,
+                required: true
+            },
+            defaultCharge: {
+                type: Number,
+                required: false
+            }
+        },
+        data(){
+            return {
+                parameters: {
+                    name: 'Service Charge',
+                    reference: 'SERVICE_CHARGE',
+                    detail: {
+                        service_charge: {
+                            id: this.details.id,
+                            type: "percentage",
+                            amount: this.defaultCharge,
+                        },
+                    },
+                    segment_id: 1
+                },
+            }
+        },
+        validations: {
+            parameters: {
+                amount: {
+                    required: true
+                }
+            }
+        },
+        methods: {
+            submitForm(){
+                if (this.defaultCharge == null) {
+                    this.submit(this.route('api.segment_constant.create'), 'post', this.section, true, true);
+                }
+                else {
+                    this.submit(this.route('api.segment_constant.update', this.service_charges.id), 'post', this.section, true, true);
+                }
+            },
+        },
+        mixins: [ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file