diff --git a/resources/js/user/pages/contracts/Table.vue b/resources/js/user/pages/contracts/Table.vue
index 3b42b79..8d7a135 100644
--- a/resources/js/user/pages/contracts/Table.vue
+++ b/resources/js/user/pages/contracts/Table.vue
@@ -85,6 +85,14 @@
                 >
                   <i class="fa fa-edit"></i>
               </router-link>
+              <button
+                  v-if="permission_list.includes('edit contract')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  @click="contractDeleteModalToggle(contract)"
+                >
+                  <i class="fa fa-trash"></i>
+                </button>
             </td>
           </tr>
           <tr v-if="!contract_list.data || !contract_list.data[0]">
@@ -109,6 +117,10 @@
           </tr>
         </tfoot>
       </table>
+      <contract-delete-modal
+        :selected_contract="selected_contract"
+        @refresh="getContractList()"
+      ></contract-delete-modal>
     </b-card>
   </div>
 </template>
@@ -116,11 +128,13 @@
 <script>
   import ContractFilter from "./Filter";
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
+  import ContractDeleteModal from './DeleteModal';
 
   export default {
     components: {
       ContractFilter,
-      PaginateNav
+      PaginateNav,
+      ContractDeleteModal
     },
     data() {
       return {
@@ -133,6 +147,7 @@
         filter_status: false,
         loading: true,
         contract_list: [],
+        selected_contract:{},
         permission_list: []
       }
     },
@@ -192,7 +207,12 @@
         let vm = this;
         vm.form.reset();
         vm.filterSubmit();
-      }
+      },
+      contractDeleteModalToggle(selected_contract) {
+        let vm = this;
+        vm.selected_contract = selected_contract;
+        vm.$bvModal.show('contract-delete-modal');
+      },
     },
     mounted() {
       let vm = this;