diff --git a/resources/js/user/pages/contract-template-obligations/TableModal.vue b/resources/js/user/pages/contract-template-obligations/TableModal.vue
index 60ca74f..2ad4ff4 100644
--- a/resources/js/user/pages/contract-template-obligations/TableModal.vue
+++ b/resources/js/user/pages/contract-template-obligations/TableModal.vue
@@ -83,6 +83,15 @@
                 >
                   <i class="fa fa-edit"></i>
                 </button>
+
+                <button
+                  v-if="permission_list.includes('edit contract_template_obligation')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  @click="contractTemplateObligationDeleteModalToggle(contract)"
+                >
+                  <i class="fa fa-trash"></i>
+                </button>
               </td>
             </tr>
             <tr v-if="!contract_template_obligation_list.data || !contract_template_obligation_list.data[0]">
@@ -128,6 +137,11 @@
         :mode="mode"
         @refresh="getContractTemplateObligationList()"
       ></contract-template-obligation-form-modal>
+      <contract-template-obligation-delete-modal
+        :selected_contract_template_obligation="selected_contract_template_obligation"
+        @refresh="getContractTemplateObligationList()"
+      ></contract-template-obligation-delete-modal>
+
       <contract-template-obligation-dependency-table-modal
         :this_contract_template_obligation="selected_contract_template_obligation"
         :permission_list="permission_list"
@@ -141,6 +155,7 @@
 <script type="text/javascript">
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
   import ContractTemplateObligationFormModal from './FormModal';
+  import ContractTemplateObligationDeleteModal from './DeleteModal';
   import ContractTemplateObligationDependencyTableModal from '../contract-template-obligation-denpendencies/TableModal';
   import ContractTemplateObligationContractTemplateDependencyTableModal from '../contract-template-obligation-contract-template-denpendencies/TableModal';
   import Draggable from 'vuedraggable';
@@ -153,6 +168,7 @@
     components: {
       PaginateNav,
       ContractTemplateObligationFormModal,
+      ContractTemplateObligationDeleteModal,
       ContractTemplateObligationDependencyTableModal,
       ContractTemplateObligationContractTemplateDependencyTableModal,
       Draggable
@@ -183,6 +199,11 @@
         vm.mode = 'edit';
         vm.$bvModal.show('contract-template-obligation-form-modal');
       },
+      contractTemplateObligationDeleteModalToggle(selected_contract_template_obligation) {
+        let vm = this;
+        vm.selected_contract_template_obligation = selected_contract_template_obligation;
+        vm.$bvModal.show('contract-template-obligation-delete-modal');
+      },
       contractTemplateObligationDependencyTableModalToggle(selected_contract_template_obligation) {
         let vm = this;
         vm.selected_contract_template_obligation = selected_contract_template_obligation;