diff --git a/resources/assets/vue/components/order/elements/OrderProfileComponent.vue b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
index e3ba258..7536e96 100644
--- a/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
+++ b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
@@ -168,26 +168,26 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="tab-content">
+                    <div class="tab-content parentContainer">
                         <div class="tab-pane fade show active" id="overview">
                             <div class="row no-margin">
-                                <div class="col">
-                                    <div class="row fs-12 parentContainer ">
+                                <div :class="[{'col-4': showArrangements}, {'col-8': !showArrangements}, ]">
+                                    <div class="row fs-12">
                                         <div class="col">
-                                            <div class="row bg-white all-caps muted p-t-10 p-b-10 b-b b-grey">
+                                            <div class="row bg-white all-caps p-t-10 p-b-10 b-b b-grey">
                                                 <div class="col">
                                                     <small class="bold all-caps">Packing List</small>
                                                 </div>
                                                 <div class="col text-right">
-                                                    <small class="all-caps text-complete pointer requestModal" data-type="packingList">Edit List</small>
+                                                    <small class="all-caps text-complete pointer requestModal" data-type="packingList" :class="{'hide': showArrangements}">Edit List</small>
                                                 </div>
                                             </div>
                                             <div class="row" v-if="order.packing_list !== null">
                                                 <div class="col">
                                                     <div class="row align-items-center justify-content-center b-b b-grey" v-for="(package, index) in order.packing_list.packages">
-                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">{{index + 1}}. {{package.description}}</small></div>
-                                                        <div class="col-1"></div>
-                                                        <div class="col-3">
+                                                        <div class="col bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">{{index + 1}}. {{package.description}}</small></div>
+                                                        <div class="col-1" v-show="!showArrangements"></div>
+                                                        <div class="col-4" :class="[{'col-5': showArrangements}, {'col-4': !showArrangements}, ]">
                                                             <svg v-if="package.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
                                                                 <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal;">
                                                                     <path d="M0,192v-192h192v192z" fill="none"></path>
@@ -209,7 +209,7 @@
                                                             <small class="m-l-5 m-r-5 text-info hint-text">x</small>
                                                             <small class="bold text-info">{{package.quantity}}</small>
                                                         </div>
-                                                        <div class="col text-right"><small class="muted bold">{{package.length}} x {{package.width}} x {{package.height}} cm</small></div>
+                                                        <div class="col text-right" v-show="!showArrangements"><small class="muted bold">{{package.length}} x {{package.width}} x {{package.height}} cm</small></div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -237,30 +237,35 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <modal-component type="packingList" large>
-                                                <div class="card card-default no-border">
-                                                    <div class="card-block no-padding">
-                                                        <packing-list-form-component :attachments="this.order.packing_list" :data="this.orderId"></packing-list-form-component>
-                                                    </div>
-                                                </div>
-                                            </modal-component>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-4 bg-master-lighter p-t-10 p-b-10 hint-text">
-                                    <div class="row m-b-20 fs-12">
+                                <div class="col bg-master-lighter hint-text p-b-10">
+                                    <div class="row p-t-10 p-b-10 bg-white b-l b-grey fs-12">
                                         <div class="col">
-                                            <div class="row m-l-0 m-r-0 m-b-5">
-                                                <div class="col no-padding p-b-10  b-b" style="border-color: rgb(204, 204, 204);">
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <small class="bold all-caps no-margin hint-text" >Shipping</small>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <small class="bold all-caps no-margin" >Arrangements</small>
+                                                </div>
+                                                <div class="col-auto p-l-0"><small class="bold text-complete pointer all-caps" @click="showArrangements = !showArrangements" >Show <span v-if="!showArrangements">more</span><span v-else>less</span></small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-10 fs-12">
+                                        <div class="col">
+                                            <div class="row no-margin">
+                                                <div class="col no-padding">
+                                                    <div class="row bg-master-light">
+                                                        <div class="col p-t-5 p-b-5">
+                                                            <small class="bold all-caps no-margin" >Shipping</small>
+                                                        </div>
+                                                        <div class="col-4 no-padding" v-show="showArrangements && order.shipping_arrangement !== null">
+                                                            <small class="btn btn-xs btn-block fs-9 h-100 lh-18 p-t-5 p-b-5 bg-warning all-caps bold no-border pointer requestModal " data-type="shippingArrangement">Reschedule Shipping</small>
                                                         </div>
-                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="row" v-if="order.shipping_arrangement !== null">
+                                            <div class="row p-t-10 p-b-10" v-if="order.shipping_arrangement !== null">
                                                 <div class="col">
                                                     <div class="row m-b-5 align-items-center justify-content-center" v-for="(schedule, index) in order.shipping_arrangement.schedule">
                                                         <div class="col-auto p-r-0">
@@ -279,7 +284,19 @@
                                                                 <div class="col"><small class="bold">{{schedule.ETA}}</small></div>
                                                             </div>
                                                         </div>
-                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8" :class="[{'text-success': schedule.status === 0}, {'text-danger': schedule.status === 2}]"></i></div>
+                                                        <div class="col-auto" v-show="showArrangements">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">Remark</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold" v-if="schedule.remark">{{schedule.remark}}</small><small class="muted" v-else>...</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col text-right">
+                                                            <i class="fa fa-circle fs-8" :class="[{'text-success': schedule.status === 0}, {'text-danger': schedule.status === 2}]"></i>
+                                                            <i class="fa fa-times text-danger fs-10 m-l-5" v-show="showArrangements"></i>
+                                                            <i class="fa fa-pencil text-info fs-10 m-l-5" v-show="showArrangements"></i>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -302,27 +319,28 @@
                                                     </div>
                                                     <div class="row">
                                                         <div class="col">
-                                                            <small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
+                                                            <small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold pointer requestModal" data-type="shippingArrangement"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
                                                         </div>
                                                     </div>
-
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="row fs-12">
                                         <div class="col">
-                                            <div class="row m-l-0 m-r-0 m-b-5">
-                                                <div class="col no-padding p-b-10 b-b" style="border-color: rgb(204, 204, 204);">
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <small class="bold all-caps no-margin hint-text" >Delivery</small>
+                                            <div class="row no-margin">
+                                                <div class="col no-padding">
+                                                    <div class="row bg-master-light">
+                                                        <div class="col p-t-5 p-b-5">
+                                                            <small class="bold all-caps no-margin " >Delivery</small>
+                                                        </div>
+                                                        <div class="col-4 no-padding" v-show="showArrangements && order.shipping_arrangement !== null">
+                                                            <small class="btn btn-xs btn-block fs-9 h-100 lh-18 p-t-5 p-b-5 bg-warning all-caps bold no-border pointer requestModal " data-type="deliveryArrangement">Reschedule Delivery</small>
                                                         </div>
-                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="row" v-if="order.delivery_arrangement !== null">
+                                            <div class="row p-t-10 p-b-10" v-if="order.delivery_arrangement !== null">
                                                 <div class="col">
                                                     <div class="row m-b-5 align-items-center justify-content-center" v-for="(schedule, index) in order.delivery_arrangement.schedule">
                                                         <div class="col-auto p-r-0">
@@ -345,7 +363,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="row p-t-10 p-b-10" v-show="order.shipping_arrangement === null">
+                                            <div class="row p-t-10 p-b-10" v-show="order.delivery_arrangement === null">
                                                 <div class="col text-center">
                                                     <div class="row">
                                                         <div class="col">
@@ -365,7 +383,7 @@
                                                     </div>
                                                     <div class="row">
                                                         <div class="col">
-                                                            <small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
+                                                            <small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold  pointer requestModal" data-type="deliveryArrangement"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
                                                         </div>
                                                     </div>
 
@@ -696,6 +714,27 @@
                                 </div>
                             </div>
                         </div>
+                        <modal-component type="packingList" large>
+                            <div class="card card-default no-border">
+                                <div class="card-block no-padding">
+                                    <packing-list-form-component :attachments="this.order.packing_list" :data="this.orderId"></packing-list-form-component>
+                                </div>
+                            </div>
+                        </modal-component>
+                        <modal-component type="shippingArrangement">
+                            <div class="card card-default no-border">
+                                <div class="card-block no-padding">
+                                    <shipping-arrangement-form-component :attachments="this.order.shipping_arrangement" :data="this.orderId"></shipping-arrangement-form-component>
+                                </div>
+                            </div>
+                        </modal-component>
+                        <modal-component type="deliveryArrangement">
+                            <div class="card card-default no-border">
+                                <div class="card-block no-padding">
+                                    <delivery-arrangement-form-component :attachments="this.order.delivery_arrangement" :data="this.orderId"></delivery-arrangement-form-component>
+                                </div>
+                            </div>
+                        </modal-component>
                     </div>
                 </div>
                 <div class="col">
@@ -811,6 +850,7 @@
             return {
                 orderId: this.data,
                 order: null,
+                showArrangements: false,
                 isLoading: true
             }
         },
diff --git a/resources/assets/vue/components/order/elements/OrdersPageComponent.vue b/resources/assets/vue/components/order/elements/OrdersPageComponent.vue
index e343e18..a5b45c1 100644
--- a/resources/assets/vue/components/order/elements/OrdersPageComponent.vue
+++ b/resources/assets/vue/components/order/elements/OrdersPageComponent.vue
@@ -84,7 +84,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-7">
+        <div class="col-9">
             <div class="card no-border bg-transparent">
                 <div class="row"  v-show="this.searchActive">
                     <div class="col">