diff --git a/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue b/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
index ab09f62a..b33dd4b5 100644
--- a/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
+++ b/resources/assets/vue/components/orders/elements/UnclaimedPackinglistComponent.vue
@@ -18,11 +18,15 @@
                                     <p class="no-margin all-caps fs-10 light">Reference</p>
                                     <p class="no-margin text-success bold">{{data.reference ? data.reference : 'n/a'}}</p>
                                 </div>
-                                <div class="col-auto">
+                                <div class="col">
                                     <p class="no-margin all-caps fs-10 light">Arrival Date</p>
                                     <p class="no-margin text-success bold">{{data.transport ? data.transport.drop_date : 'n/a'}}</p>
                                 </div>
-                                <div class="col text-right" v-if="$store.getters.isSuperAdmin">
+                                <div class="col-auto" v-if="$store.getters.isSuperAdmin">
+                                    <button type="button" class="btn b-rad-none btn-danger fs-11 requestModal" data-type="deletePackingList"><i class="fa fa-times text-white fs-12"></i></button>
+                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePackingList">
+                                        <delete-packinglist-form-component :data="data"></delete-packinglist-form-component>
+                                    </modal-component>
                                     <button type="button" class="btn 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>
diff --git a/resources/assets/vue/components/orders/forms/DeletePackinglistFormComponent.vue b/resources/assets/vue/components/orders/forms/DeletePackinglistFormComponent.vue
new file mode 100644
index 00000000..ec52e362
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/DeletePackinglistFormComponent.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row m-b-10">
+                <div class="col text-center">
+                    <h3 class="all-caps">Are you sure?</h3>
+                    <div class="fs-11">Are you sure you want to delete this Packing List?</div>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col-auto p-r-5">
+                    <div class="btn btn-lg btn-default b-rad-none" data-dismiss="modal">Cancel</div>
+                </div>
+                <div class="col p-l-5">
+                    <div class="btn btn-danger w-100 btn-lg" @click="submit(route('api.packing_list.delete', data.id), 'delete', section, true, true)">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+
+    export default {
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file