diff --git a/resources/js/user/pages/contract-template-obligations/DeleteModal.vue b/resources/js/user/pages/contract-template-obligations/DeleteModal.vue
new file mode 100644
index 0000000..dc02e95
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligations/DeleteModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-delete-modal'" size="lg" scrollable>
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Delete</h4>
+      </template>
+
+      
+      Are you sure want to delete?
+      
+
+      <template v-slot:modal-footer>
+            
+          <form  @submit.prevent="onSubmit">
+            <v-btn
+            :loading="loading"
+            :disabled="loading"
+            color="primary"
+            class="white--text"
+            @click="onCancel"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+            :loading="loading"
+            :disabled="loading"
+            type="submit"
+            color="primary"
+            class="white--text"
+            @click="loader = 'loading'"
+            >
+              Submit
+            </v-btn>
+          </form>     
+        </template>
+    </b-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  
+
+  export default {
+    props: {
+      selected_contract_template_obligation: Object,
+    },
+    components: {
+      
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            selected_contract_template_obligation_id: ''
+          }),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_id = '';
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onCancel(){
+        let vm = this;
+        vm.$bvModal.hide('contract-template-obligation-delete-modal');
+      },
+      onSubmit() {
+        let vm = this;
+        console.log(vm.selected_contract_template_obligation);
+        vm.form.selected_contract_template_obligation_id = vm.selected_contract_template_obligation.hash_id;
+
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'delete';
+        let url = 'contract-template-obligation/delete/'+vm.selected_contract_template_obligation.hash_id;
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-delete-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('edit', 'Contract Template Obligation', data.data.hash_id);
+        })
+        .catch(function (error) {
+            vm[l] = false
+            vm.loader = null;
+        });
+        
+      },
+    }
+  }
+</script>
\ No newline at end of file