diff --git a/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue b/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
index 52f4ea79..81e33a81 100644
--- a/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
+++ b/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
@@ -33,8 +33,35 @@
                                     <p class="no-margin text-success bold">{{data.packages ? data.packages[0].description: 'n/a'}}</p>
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col" v-if="$store.getters.isSuperAdmin">
+                            <div class="row" v-if="$store.getters.isSuperAdmin">
+                                <div class="col-auto">
+                                    <button type="button" class="btn btn-block b-rad-none btn-danger fs-11 requestModal" data-type="deletePackingList">Delete</button>
+                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePackingList">
+                                        <div class="row">
+                                            <div class="col">
+                                                <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+                                                <div class="row justify-content-center" v-show="!isLoading">
+                                                    <div class="col">
+                                                        <div class="row m-b-20">
+                                                            <div class="col">
+                                                                <h3 class="all-caps">Are you sure you want to delete this packing list?</h3>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row">
+                                                            <div class="col p-r-5">
+                                                                <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                                                            </div>
+                                                            <div class="col p-l-5">
+                                                                <div class="btn btn-sm btn-danger btn-block b-rad-none" data-dismiss="modal" @click="submit(route('api.packing_list.delete', item.id), 'delete', 'unclaimedPackingListSection', true, true)">Confirm</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </modal-component>
+                                </div>
+                                <div class="col">
                                     <button type="button" class="btn btn-block b-rad-none btn-primary fs-11 requestModal" data-type="claimPackingList">Claim</button>
                                     <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="claimPackingList">
                                         <claim-packinglist-form-component :data="data.id"></claim-packinglist-form-component>