diff --git a/resources/assets/vue/components/containers/forms/RescheduleTransportDateFormComponent.vue b/resources/assets/vue/components/containers/forms/RescheduleTransportDateFormComponent.vue
new file mode 100644
index 00000000..3bd98369
--- /dev/null
+++ b/resources/assets/vue/components/containers/forms/RescheduleTransportDateFormComponent.vue
@@ -0,0 +1,66 @@
+<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">
+                    <p>Plese set the approximate dates of below.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col p-l-0 p-r-10">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.etd">
+                                <label class="text-primary">Etd</label>
+                                <date-picker-component v-model="parameters.etd"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col p-r-0 p-l-10">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.eta">
+                                <label class="text-primary">Eta</label>
+                                <date-picker-component v-model="parameters.eta"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                    </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-primary w-100 btn-lg" @click="submit(route('api.packing_list.reschedule', data.id), 'put', section, true, true)">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            section:{
+                type: String,
+                default: ''
+            },
+        },
+        data() {
+            return {
+                parameters: {
+                    etd: this.etd, 
+                    eta: this.eta, 
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                etd: { required },
+                eta: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file