diff --git a/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php b/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php
new file mode 100644
index 0000000..b0f5ef3
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Classes\Modules\ControllersLogic\Orders\PackingList;
+
+use App\Classes\Modules\ControllerLogic\Exceptions\InternalServerErrorException;
+use App\Classes\Modules\Orders\DataTransferObjects\OrderObject;
+use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
+use App\Classes\Modules\Orders\Services\PackingList\UpdatesPackingList;
+use App\Classes\ValueObjects\Constants\HttpStatus;
+use App\Traits\ChecksIfPackingListIsComplete;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class UpdatePackingListLogic
+{
+
+    use ChecksIfPackingListIsComplete;
+
+    /** @var UpdatesPackingList */
+    private $updatesPackingList;
+
+    /**
+     * UpdatePackingListLogic constructor.
+     * @param UpdatesPackingList $updatesPackingList
+     */
+    public function __construct(UpdatesPackingList $updatesPackingList)
+    {
+        $this->updatesPackingList = $updatesPackingList;
+    }
+
+
+    /**
+     * @param String $orderId
+     * @param Request $request
+     * @return JsonResponse
+     * @throws InternalServerErrorException
+     */
+    public function execute(String $orderId, Request $request){
+
+        try {
+
+            $orderObject = new OrderObject($orderId);
+
+            $packingListObject = new PackingListObject($request->input('reference_no'), $request->input('packages'));
+
+            $confirmed = $this->checkPackingListIsComplete($packingListObject->getPackages());
+
+            $this->updatesPackingList->execute($orderObject, $packingListObject, $confirmed);
+
+            return new JsonResponse(null, HttpStatus::RESOURCE_CREATED);
+
+        } catch (\Exception $exception){
+            throw new InternalServerErrorException("Failed to update order's packing list because {$exception->getMessage()}");
+        }
+
+
+
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php b/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php
deleted file mode 100644
index bd8c8b8..0000000
--- a/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-
-namespace App\Classes\Modules\Orders\DataTransferObjects;
-
-
-class PackageObject
-{
-
-    /** @var string */
-    private $description;
-
-    /** @var integer */
-    private $quantity;
-
-    /** @var integer */
-    private $width;
-
-    /** @var integer */
-    private $height;
-
-    /** @var integer */
-    private $length;
-
-    /**
-     * PackageObject constructor.
-     * @param string $description
-     * @param int $quantity
-     * @param int $width
-     * @param int $height
-     * @param int $length
-     */
-    public function __construct(string $description, int $quantity, int $width, int $height, int $length)
-    {
-        $this->description = $description;
-        $this->quantity = $quantity;
-        $this->width = $width;
-        $this->height = $height;
-        $this->length = $length;
-    }
-
-    /**
-     * @return string
-     */
-    public function getDescription(): string
-    {
-        return $this->description;
-    }
-
-    /**
-     * @return int
-     */
-    public function getQuantity(): int
-    {
-        return $this->quantity;
-    }
-
-    /**
-     * @return int
-     */
-    public function getWidth(): int
-    {
-        return $this->width;
-    }
-
-    /**
-     * @return int
-     */
-    public function getHeight(): int
-    {
-        return $this->height;
-    }
-
-    /**
-     * @return int
-     */
-    public function getLength(): int
-    {
-        return $this->length;
-    }
-
-
-}
\ No newline at end of file
diff --git a/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php b/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
index 89489db..83ede23 100644
--- a/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
+++ b/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
@@ -9,25 +9,21 @@ class PackingListObject
     /** @var string */
     private $referenceId;
 
-    /** @var boolean */
-    private $confirmed;
-
     /** @var PackageObject[] */
     private $packages;
 
     /**
      * PackingListObject constructor.
      * @param string $referenceId
-     * @param bool $confirmed
-     * @param array $packages
+     * @param PackageObject[] $packages
      */
-    public function __construct(string $referenceId, bool $confirmed, array $packages)
+    public function __construct(string $referenceId, array $packages)
     {
         $this->referenceId = $referenceId;
-        $this->confirmed = $confirmed;
         $this->packages = $packages;
     }
 
+
     /**
      * @return string
      */
@@ -37,21 +33,11 @@ class PackingListObject
     }
 
     /**
-     * @return bool
+     * @return array
      */
-    public function isConfirmed(): bool
+    public function getPackages(): array
     {
-        return $this->confirmed;
-    }
-
-    /**
-     * @return PackageObject[]
-     */
-    public function getPackages()
-    {
-        return array_map(function($package){
-            return new PackageObject($package['description'], $package['quantity'], $package['width'], $package['height'], $package['length']);
-        }, $this->packages);
+        return $this->packages;
     }
 
 
diff --git a/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php b/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php
new file mode 100644
index 0000000..1397364
--- /dev/null
+++ b/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Classes\Modules\Orders\Services\PackingList;
+
+
+use App\Classes\Modules\Orders\DataTransferObjects\OrderObject;
+use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
+use App\Models\PackingList;
+
+class UpdatesPackingList
+{
+
+    /** @var PackingList */
+    private $repository;
+
+    /**
+     * UpdatesPackingList constructor.
+     * @param PackingList $repository
+     */
+    public function __construct(PackingList $repository)
+    {
+        $this->repository = $repository;
+    }
+
+
+    public function execute(OrderObject $orderObject, PackingListObject $packingListObject, bool $confirmed){
+
+        $packingList = $this->repository->firstOrCreate(['order_id' => $orderObject->getOrderId()],
+            [
+                'reference_no' => $packingListObject->getReferenceId(),
+                'confirmed' => $confirmed
+            ]);
+
+        $packingList->packages()->delete();
+        $packingList->packages()->createMany($packingListObject->getPackages());
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Orders/OrderController.php b/app/Http/Controllers/Orders/OrderController.php
index b1db9ec..cb45254 100644
--- a/app/Http/Controllers/Orders/OrderController.php
+++ b/app/Http/Controllers/Orders/OrderController.php
@@ -2,9 +2,6 @@
 
 namespace App\Http\Controllers\Orders;
 
-use App\Classes\ControllersLogic\Orders\CreateOrder;
-use App\Classes\Modules\ControllersLogic\Orders\UpdateOrderStepLogic;
-use App\Classes\Modules\Orders\DataTransferObjects\PackageObject;
 use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
 use App\Models\CustomIssues;
 use App\Models\Order;
@@ -19,7 +16,7 @@ class OrderController extends Controller
 {
 
     public function show($id){
-        $order = Order::findOrFail($id)->first();
+        $order = order::findOrFail($id);
         return new OrderResource($order);
     }
 
@@ -36,6 +33,7 @@ class OrderController extends Controller
     }
 
     public function updatePackingList(String $orderId, Request $request){
+        dd($request->input('packages'));
         $packingList = PackingList::updateOrCreate(['order_id' => $orderId],['reference_no' => $request->input('reference_no')]);
         $confirmed = true;
         $packages = [];
diff --git a/app/Http/Controllers/Orders/UpdatePackingListController.php b/app/Http/Controllers/Orders/UpdatePackingListController.php
new file mode 100644
index 0000000..88dbc9f
--- /dev/null
+++ b/app/Http/Controllers/Orders/UpdatePackingListController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Orders;
+
+use App\Classes\Modules\ControllersLogic\Orders\PackingList\UpdatePackingListLogic;
+use Illuminate\Http\Request;
+
+class UpdatePackingListController
+{
+    /**
+     * @param String $orderId
+     * @param Request $request
+     * @param UpdatePackingListLogic $logic
+     * @throws \App\Classes\Modules\ControllerLogic\Exceptions\InternalServerErrorException
+     */
+    public function update(String $orderId, Request $request , UpdatePackingListLogic $logic){
+        $logic->execute($orderId, $request);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Order.php b/app/Http/Resources/Order.php
index d172872..1641d31 100644
--- a/app/Http/Resources/Order.php
+++ b/app/Http/Resources/Order.php
@@ -5,6 +5,8 @@ namespace App\Http\Resources;
 use App\Classes\Modules\Orders\Services\ListsOrderHistory;
 use App\Classes\Modules\Steps\GetStep;
 use App\Classes\Modules\Steps\StepAttachments;
+use App\Models\OrderStep;
+use App\Http\Resources\OrderStep as OrderStepResource;
 use Illuminate\Http\Resources\Json\JsonResource;
 use App\Models\AddressBook;
 
@@ -27,13 +29,13 @@ class Order extends JsonResource
             'supplier_id' => $this->supplier_id,
             'warehouse_id' => $this->warehouse_id,
             'address' => new \App\Http\Resources\AddressBook($addressBook),
-            'current_step' => $this->current_step,
             'complete' => (float)$this->complete,
             'date' => $this->created_at->format('d/m/Y'),
-            'steps' => [
+            'current_step' => [
                 'details' => (new GetStep())->execute($this->current_step),
                 'attachments' => (new StepAttachments())->execute($this->id, $this->current_step)
             ],
+            'steps' => OrderStepResource::collection(OrderStep::where('order_id', $this->id)->orderBy('sequence')->get()),
             'details' => (new ListsOrderHistory())->execute($this->id, $this->created_at, $this->complete, $this->updated_at)
         ];
     }
diff --git a/app/Http/Resources/OrderStep.php b/app/Http/Resources/OrderStep.php
new file mode 100644
index 0000000..ba13201
--- /dev/null
+++ b/app/Http/Resources/OrderStep.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Classes\Modules\Steps\GetStep;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class OrderStep extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'complete' => $this->complete,
+            'reference_id' => $this->reference_id,
+            'details' => (new GetStep())->execute($this->reference_id)
+        ];
+    }
+}
diff --git a/app/Traits/ChecksIfPackingListIsComplete.php b/app/Traits/ChecksIfPackingListIsComplete.php
new file mode 100644
index 0000000..0b2ac55
--- /dev/null
+++ b/app/Traits/ChecksIfPackingListIsComplete.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Traits;
+
+
+trait ChecksIfPackingListIsComplete
+{
+    public function checkPackingListIsComplete(array $packages): bool {
+
+        if(empty($packages)){
+            return false;
+        }
+
+        foreach ($packages as $package) {
+            if($package['width'] == 0 || $package['length'] == 0 || $package['height'] == 0){
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+}
\ No newline at end of file
diff --git a/database/migrations/2018_11_30_085832_create_packages.php b/database/migrations/2018_11_30_085832_create_packages.php
index 355fa1f..7eaf329 100644
--- a/database/migrations/2018_11_30_085832_create_packages.php
+++ b/database/migrations/2018_11_30_085832_create_packages.php
@@ -16,6 +16,7 @@ class CreatePackages extends Migration
         Schema::create('packages', function (Blueprint $table) {
             $table->increments('id');
             $table->integer('list_id')->unsigned()->index();
+            $table->integer('type')->default(0);
             $table->string('description');
             $table->integer('width');
             $table->integer('length');
diff --git a/resources/assets/images/icons/packing-icon.png b/resources/assets/images/icons/packing-icon.png
new file mode 100644
index 0000000..bc9a378
Binary files /dev/null and b/resources/assets/images/icons/packing-icon.png differ
diff --git a/resources/assets/images/icons/processing-icon.png b/resources/assets/images/icons/processing-icon.png
new file mode 100644
index 0000000..44ec0ff
Binary files /dev/null and b/resources/assets/images/icons/processing-icon.png differ
diff --git a/resources/assets/sass/modules/_tabs_accordian.scss b/resources/assets/sass/modules/_tabs_accordian.scss
index 5f90783..60ae67b 100644
--- a/resources/assets/sass/modules/_tabs_accordian.scss
+++ b/resources/assets/sass/modules/_tabs_accordian.scss
@@ -150,7 +150,7 @@
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     width: 100%;
     position: absolute;
-    bottom: -2px;
+    bottom: -1px;
     z-index: 120;
     left: 0;
   }
@@ -168,7 +168,7 @@
         content: '';
         left: 0;
         z-index: 125;
-        top: 100%;
+        top: calc(100% - 1px);
         &.nav-tabs-primary{
           background-color: $color-primary;
         }
@@ -635,6 +635,22 @@
   }
 }
 
+.nav-item {
+  .arrow_tab {
+    overflow: hidden;
+    background-color: $color-master-lighter;
+    opacity: 0.5;
+    border-color: $color-master-light;
+  }
+  .active {
+    .arrow_tab {
+      opacity: 1;
+      background-color: $color-white !important;
+      border-color: $color-white;
+    }
+  }
+}
+
 /* Panel Groups
 ------------------------------------
 */
diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index d0ea778..2c02568 100644
--- a/resources/assets/vue/app.js
+++ b/resources/assets/vue/app.js
@@ -80,10 +80,11 @@ Vue.component('order-page-component', require('./components/order/elements/Order
 Vue.component('order-select-component', require('./components/order/elements/OrderSelectComponent.vue'));
 
 Vue.component('order-component', require('./components/order/elements/OrderComponenet.vue'));
-Vue.component('order-profile-component', require('./components/order/elements/OrdersProfileComponent.vue'));
+Vue.component('order-profile-component', require('./components/order/elements/OrderProfileComponent.vue'));
 Vue.component('order-header-component', require('./components/order/elements/OrderHeaderComponenet.vue'));
 Vue.component('order-action-component', require('./components/order/elements/OrderActionComponenet.vue'));
-Vue.component('order-history-component', require('./components/order/elements/OrderHistoryComponenet.vue'));
+Vue.component('order-delivery-address-component', require('./components/order/elements/OrderDeliveryAddressComponenet.vue'));
+Vue.component('order-quick-view-component', require('./components/order/elements/OrderQuickViewComponenet.vue'));
 
 
 Vue.component('confirm-order-component', require('./components/order/elements/steps/ConfirmOrderComponent.vue'));
diff --git a/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue b/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
index 01051fe..21d3e5b 100644
--- a/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
+++ b/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
@@ -114,6 +114,16 @@
                                         Complete
                                     </a>
                                 </li>
+                                <li class="ml-auto">
+                                    <div class="row h-100 parentContainer">
+                                        <div class="col">
+                                            <button class="btn btn-xs btn-primary b-rad-none no-border h-100 fs-11 all-caps semi-bold p-l-20 p-r-20 requestModal"  data-type="newOrder">Create new order</button>
+                                            <modal-component type="newOrder">
+                                                <order-form-component :data="companyId"></order-form-component>
+                                            </modal-component>
+                                        </div>
+                                    </div>
+                                </li>
                             </ul>
                             <div class="tab-content bg-transparent p-l-0 p-r-0">
                                 <div class="tab-pane active" id="processing">
@@ -158,26 +168,6 @@
                     </div>
                 </div>
             </div>
-            <!--<div class="col-2 p-t-40 p-r-0 p-l-0">-->
-                <!--<div class="row m-b-15 parentContainer">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-primary b-rad-none all-caps bold p-t-10 p-b-10 requestModal"  data-type="newOrder"><i class="fa fa-shopping-basket fs-14 m-r-5"></i> New Order</button>-->
-                        <!--<modal-component type="newOrder">-->
-                            <!--<order-form-component :data="companyId"></order-form-component>-->
-                        <!--</modal-component>-->
-                    <!--</div>-->
-                <!--</div>-->
-                <!--<div class="row m-b-15">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-info b-rad-none all-caps bold p-t-10 p-b-10"><i class="fa fa-envelope-open-o fs-14 m-r-5"></i> Send Invite</button>-->
-                    <!--</div>-->
-                <!--</div>-->
-                <!--<div class="row">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-info bg-master bg-master b-rad-none all-caps bold p-t-10 p-b-10"><i class="fa fa-line-chart fs-14 m-r-5"></i> Reports</button>-->
-                    <!--</div>-->
-                <!--</div>-->
-            <!--</div>-->
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue b/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
index dd8b6a1..9290729 100644
--- a/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
+++ b/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
@@ -8,41 +8,41 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col text-justify">
+                <div class="col">
                     <p class="m-b-0 bold">{{this.company.name}}</p>
                 </div>
             </div>
             <div class="row">
-                <div class="col text-justify">
-                    <small class="muted">{{this.company.street_one || ''}} {{ this.company.street_two || '' }} {{this.company.city || '' }} {{this.company.post_code || ''}} {{this.company.state || ''}} {{this.company.country || ''}}</small>
+                <div class="col">
+                    <small class="muted fs-12">{{this.company.street_one || ''}} {{ this.company.street_two || '' }} {{this.company.city || '' }} {{this.company.post_code || ''}} {{this.company.state || ''}} {{this.company.country || ''}}</small>
                 </div>
             </div>
             <div class="row no-margin">
                 <div class="col">
                     <div class="row m-t-15 p-t-5 p-b-5 b-t b-b b-grey">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Registration No:</small>
+                            <small class="muted fs-9 all-caps">Registration No:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.registration_no !==''" class="text-complete fs-10 bold">{{this.company.registration_no}}</small>
+                            <small v-if="this.company.registration_no !==''" class="muted fs-10 bold">{{this.company.registration_no}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
                     <div class="row p-t-5 p-b-5 b-b b-grey">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Tax No:</small>
+                            <small class="muted fs-9 all-caps">Tax No:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.tax_no !==''" class="text-complete fs-10 bold">{{this.company.tax_no}}</small>
+                            <small v-if="this.company.tax_no !==''" class="muted fs-10 bold">{{this.company.tax_no}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
                     <div class="row p-t-5 p-b-5">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Email:</small>
+                            <small class="muted fs-9 all-caps">Email:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.email !==''" class="text-complete fs-10 bold">{{this.company.email}}</small>
+                            <small v-if="this.company.email !==''" class="muted fs-10 bold">{{this.company.email}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
diff --git a/resources/assets/vue/components/order/elements/OrderActionComponenet.vue b/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
index 59594c6..94a89c2 100644
--- a/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
@@ -6,7 +6,7 @@
                     <small class="text-danger fs-10 requestModal pointer"  data-type="delete"><i class="fa fa-times"></i> delete order</small>
                 </div>
                 <div class="col-auto">
-                    <component :is="stepComponent(this.order.current_step)" :attachments="this.order.steps.attachments" :data="this.order.id"></component>
+                    <component :is="stepComponent(this.order.current_step.details.reference_id)" :attachments="this.order.current_step.attachments" :data="this.order.id"></component>
                     <div class="btn btn-sm btn-default b-rad-none">View Details</div>
                 </div>
             </div>
diff --git a/resources/assets/vue/components/order/elements/OrderComponenet.vue b/resources/assets/vue/components/order/elements/OrderComponenet.vue
index 0f73d73..ed67b08 100644
--- a/resources/assets/vue/components/order/elements/OrderComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderComponenet.vue
@@ -2,8 +2,8 @@
     <div class="row m-b-10 parentContainer bg-white">
         <div class="col">
             <order-header-component :data="this.data"></order-header-component>
-            <order-action-component :data="this.data"></order-action-component>
-            <order-history-component :data="this.data"></order-history-component>
+            <order-action-component class="b-t b-grey" :data="this.data"></order-action-component>
+            <order-quick-view-component :data="this.data"></order-quick-view-component>
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue b/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue
new file mode 100644
index 0000000..7cc3328
--- /dev/null
+++ b/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="bold m-b-5">{{this.order.address.reference}}</div>
+            <div class="hint-text semi-bold">{{this.order.address.contact}}</div>
+            <div class="m-t-15 m-b-15 hint-text">{{this.order.address.street_one || ''}} {{ this.order.address.street_two || '' }} {{this.order.address.city || '' }} {{this.order.address.post_code || ''}} {{this.order.address.state || ''}} {{this.order.address.country || ''}}</div>
+            <small class="block text-complete pointer all-caps">Change Address</small>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            'data': {
+                required: true
+            }
+        },
+        data() {
+            return {
+                order: this.data,
+            }
+        },
+        watch: {
+            'data': function() {
+                this.order = this.data;
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue b/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
index 1550e9a..fb146a4 100644
--- a/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="row no-margin">
         <div class="col">
-            <div class="row no-margin p-t-10 p-b-10 b-b b-grey">
+            <div class="row no-margin p-t-10 p-b-10">
                 <div class="col p-l-0">
                     <div class="row">
                         <div class="col">
@@ -21,13 +21,13 @@
                         <div class="col"></div>
                         <div class="col-auto">
                             <span class="fs-11 muted">Status: </span>
-                            <span class="text-capitalize bold text-danger fs-11" v-if="!this.order.complete">{{this.order.steps.details.initial_name}}</span>
+                            <span class="text-capitalize bold text-danger fs-11" v-if="!this.order.complete">{{this.order.current_step.details.initial_name}}</span>
                             <span class="text-capitalize bold text-success fs-11" v-if="this.order.complete">Complete</span>
                         </div>
                     </div>
                     <div class="row" >
                         <div class="col text-right muted">
-                            <span class="fs-11 inline v-align-middle" v-if="!this.order.complete">{{this.order.steps.details.description}}</span>
+                            <span class="fs-11 inline v-align-middle" v-if="!this.order.complete">{{this.order.current_step.details.description}}</span>
                             <span class="fs-11 inline v-align-middle" v-if="this.order.complete">Order has been delivered</span>
                         </div>
                     </div>
diff --git a/resources/assets/vue/components/order/elements/OrderProfileComponent.vue b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
new file mode 100644
index 0000000..4fdc30f
--- /dev/null
+++ b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
@@ -0,0 +1,830 @@
+<template>
+    <div class="row m-t-30">
+        <div class="col">
+            <div class="row m-b-50">
+                <div class="col">
+                    <div class="row m-b-30">
+                        <div class="col text-center">
+                            <h2 class="all-caps">Order No: <span class="text-primary bold">#{{this.order.marking}}</span></h2>
+                            <p class="all-caps">{{this.order.current_step.details.description}}</p>
+                        </div>
+                    </div>
+                    <div class="row align-items-center justify-content-center">
+                        <div class="col text-center" v-for="(step, index) in order.steps">
+                            <div class="row align-items-center justify-content-center">
+                                <div class="col no-padding" >
+                                    <div class="row align-items-center justify-content-center">
+                                        <div class="col-auto b-a btn-rounded b-thick no-padding" v-bind:class="[{'b-success': step.complete === '1'}, {'b-grey': step.complete === '0'}, {'b-info': step.reference_id === order.current_step.details.reference_id}]" style=" width: 50px; ">
+                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                 width="35" height="46"
+                                                 viewBox="0 0 192 192"
+                                                 style=" fill:#000000;">
+                                                <g v-if="step.reference_id === 'PS_PROCESSING'" 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><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M81,117c0,1.656 -1.344,3 -3,3h-24c-1.656,0 -3,-1.344 -3,-3v-12c0,-1.656 1.344,-3 3,-3h24c1.656,0 3,1.344 3,3z"></path><path d="M147,111c0,-8.283 -6.717,-15 -15,-15v15z"></path><rect x="29" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="26" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="30" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="26" transform="scale(3,3)" width="10" height="2"></rect><path d="M159,111c0,-13.875 -10.521,-25.323 -24,-26.823v-36.693c0,-2.403 -0.939,-4.665 -2.637,-6.363l-20.484,-20.484c-1.698,-1.698 -3.96,-2.637 -6.363,-2.637h-63.516c-4.962,0 -9,4.038 -9,9v114c0,4.962 4.038,9 9,9h72v-6h-72c-1.656,0 -3,-1.344 -3,-3v-114c0,-1.656 1.344,-3 3,-3h63v15c0,4.962 4.038,9 9,9h15v36.177c-13.479,1.5 -24,12.948 -24,26.823c0,13.875 10.521,25.323 24,26.823v6.177h-9v21c0,4.962 4.038,9 9,9h6c4.962,0 9,-4.038 9,-9v-21h-9v-6.177c13.479,-1.5 24,-12.948 24,-26.823zM135,168h-6c-1.656,0 -3,-1.344 -3,-3v-3h12v3c0,1.656 -1.344,3 -3,3zM138,156h-12v-6h12zM111,39v-10.758l13.758,13.758h-10.758c-1.656,0 -3,-1.344 -3,-3zM111,111c0,-11.577 9.423,-21 21,-21c11.577,0 21,9.423 21,21c0,11.577 -9.423,21 -21,21c-11.577,0 -21,-9.423 -21,-21z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_RECEIVING'" 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><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M132,108h-24c0,-6.63 -5.37,-12 -12,-12v-24c19.89,0 36,16.11 36,36z"></path><path d="M148.572,68.154l8.583,-8.583c2.34,-2.337 2.34,-6.147 0,-8.484l-4.242,-4.242c-2.337,-2.337 -6.147,-2.337 -8.484,0l-8.583,8.583c-10.335,-7.854 -23.043,-12.732 -36.846,-13.353v-6.075h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6v6.075c-35.004,1.575 -63,30.54 -63,65.925c0,36.393 29.607,66 66,66c36.393,0 66,-29.607 66,-66c0,-14.958 -5.01,-28.764 -13.428,-39.846zM87,24h18l0.006,6h-18.006zM149.847,105c-1.515,-27.378 -23.469,-49.332 -50.847,-50.847v-6c30.687,1.527 55.32,26.16 56.847,56.847zM96,156c-26.466,0 -48,-21.534 -48,-48c0,-26.466 21.534,-48 48,-48c26.466,0 48,21.534 48,48c0,26.466 -21.534,48 -48,48zM148.671,51.087l4.242,4.242l-8.193,8.193c-1.35,-1.476 -2.766,-2.892 -4.242,-4.242zM93,48.153v6c-27.378,1.515 -49.332,23.469 -50.847,50.847h-6c1.527,-30.687 26.16,-55.32 56.847,-56.847zM36.153,111h6c1.515,27.378 23.469,49.332 50.847,50.847v6c-30.687,-1.527 -55.32,-26.16 -56.847,-56.847zM99,167.847v-6c27.378,-1.515 49.332,-23.469 50.847,-50.847h6c-1.527,30.687 -26.16,55.32 -56.847,56.847z"></path><path d="M132,111v-6h-21.303c-1.197,-5.868 -5.829,-10.5 -11.697,-11.697v-21.303h-6v21.303c-6.837,1.395 -12,7.452 -12,14.697c0,8.271 6.729,15 15,15c7.245,0 13.302,-5.163 14.697,-12zM96,117c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9z"></path><path d="M60,108h-6c0,23.16 18.84,42 42,42v-6c-19.851,0 -36,-16.149 -36,-36z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_PACKING'" 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><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><rect x="37" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M147,141l-6,9v-87l6,-9z"></path><rect x="12" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M159,30h-105v6h105c4.962,0 9,4.038 9,9v81h6v-81c0,-8.271 -6.729,-15 -15,-15z"></path><rect x="10" y="48" transform="scale(3,3)" width="10" height="2"></rect><rect x="10" y="44" transform="scale(3,3)" width="9" height="2"></rect><rect x="30" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="34" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="38" y="46" transform="scale(3,3)" width="2" height="4"></rect><path d="M156,42h-102.855c-2.073,0 -4.101,0.723 -5.703,2.04l-26.151,21.438c-2.094,1.716 -3.291,4.254 -3.291,6.96v80.562c0,4.962 4.038,9 9,9h96c0.207,0 0.414,-0.006 0.615,-0.021c4.428,-0.198 8.721,-1.809 12.189,-4.578l22.812,-18.252c2.151,-1.716 3.384,-4.284 3.384,-7.041v-84.108c0,-3.309 -2.691,-6 -6,-6zM57,72h36v15c0,1.656 -1.344,3 -3,3h-29.7c-1.725,0 -3.3,-1.431 -3.3,-3zM94.947,66h-32.478l22.227,-18h32.751zM51.243,48.681c0.537,-0.441 1.209,-0.681 1.902,-0.681h22.014l-22.221,18h-22.818zM123.258,155.988c-0.192,0.009 -0.381,0.012 -0.57,0.012h-17.688h-78c-1.656,0 -3,-1.344 -3,-3v-80.562c0,-0.153 0.075,-0.288 0.099,-0.438h26.901v15c0,4.878 4.26,9 9.3,9h29.7c4.962,0 9,-4.038 9,-9v-15h27v81c0,1.566 -1.206,2.856 -2.742,2.988zM128.235,66h-23.682l22.503,-18h23.394l-21.069,16.857c-0.432,0.342 -0.792,0.741 -1.146,1.143zM156,132.108c0,0.924 -0.411,1.779 -1.131,2.352l-22.812,18.252c-0.018,0.015 -0.039,0.033 -0.057,0.048v-80.88c0,-0.915 0.411,-1.764 1.125,-2.334l22.875,-18.306z"></path></g></g>
+                                                <g v-if="step.reference_id === 'PS_SHIPPING'" 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><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v36h-15c-6.6,0 -12,5.4 -12,12v22.5h-9c-6.6,0 -12,5.4 -12,12v30c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-30c0,-1.65 1.35,-3 3,-3h111c1.65,0 3,1.35 3,3v41.10059l-56.70117,-22.80176h-0.14941c-0.15,0 -0.29824,-0.14941 -0.44824,-0.14941c-0.15,0 -0.30117,-0.14941 -0.45117,-0.14941c-0.6,-0.15 -1.19883,-0.15 -1.79883,0c-0.15,0 -0.30117,0.14941 -0.45117,0.14941c-0.15,0 -0.30117,-0.00059 -0.45117,0.14941h-0.14941l-74.85059,30c-2.25,0.9 -3.29883,3.30176 -2.54883,5.55176l7.95117,24c0.75,2.4 3.29824,3.60058 5.69824,2.85058c2.4,-0.75 3.60059,-3.30117 2.85059,-5.70117l-6.75,-20.10059l65.25,-25.79883v63.29883c-2.7,-0.75 -5.25059,-2.24824 -7.35059,-4.19825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.8,-1.8 -4.64883,-1.8 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883h60h0.75h0.14942c0.15,0 0.45059,-0.14942 0.60058,-0.14942c0.15,0 0.14883,0.00059 0.29883,-0.14942c0.15,0 0.30175,-0.14942 0.30175,-0.14942c0.15,0 0.14883,-0.15234 0.29883,-0.15234c0.15,0 0.30175,-0.14942 0.30175,-0.14942l0.14942,-0.14942c0.15,-0.15 0.29883,-0.14883 0.29883,-0.29883l0.14942,-0.15234c0.15,-0.15 0.15175,-0.29883 0.30175,-0.29883c0,0 0.14942,-0.14883 0.14942,-0.29883c0.15,-0.15 0.14883,-0.30175 0.29883,-0.30175c0.15,-0.15 0.15175,-0.45058 0.30175,-0.60058l15,-45c0.6,-2.7 -0.45117,-5.1 -2.70117,-6l-9.14942,-3.59766v-44.70117c0,-6.6 -5.4,-12 -12,-12h-9v-22.5c0,-6.6 -5.4,-12 -12,-12h-15v-36c0,-2.55 -1.95,-4.5 -4.5,-4.5zM100.5,10.5h21v31.5h-21zM76.5,51h69c1.65,0 3,1.35 3,3v22.5h-75v-22.5c0,-1.65 1.35,-3 3,-3zM80.85059,136.61133c-1.1625,0 -2.32441,0.41426 -3.14941,1.23926l-0.60059,0.60058c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89941c0,1.2 0.44766,2.39941 1.34766,3.14941c0.9,0.9 1.95234,1.35059 3.15234,1.35059c1.2,0 2.69824,-0.45059 3.44824,-1.35059c0.9,-0.9 1.35059,-1.94941 1.35059,-3.14941c0,-0.3 0.00059,-0.59941 -0.14941,-0.89941c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c-0.15,-0.3 -0.29824,-0.45 -0.44824,-0.75c-0.15,-0.3 -0.30059,-0.45058 -0.60059,-0.60058c-0.825,-0.825 -1.98691,-1.23926 -3.14941,-1.23926zM6,175.23633c-0.3,0 -0.59941,0.03925 -0.89941,0.11425c-0.3,0 -0.59941,0.14883 -0.89941,0.29883c-0.3,0.15 -0.45,0.30117 -0.75,0.45117c-0.3,0.15 -0.45,0.30059 -0.75,0.60058c-0.9,0.9 -1.35059,1.94942 -1.35059,3.14942c0,0.3 -0.00059,0.59941 0.14941,0.89942c0.15,0.15 0.14883,0.45 0.29883,0.75c0.15,0.3 0.30117,0.6 0.45117,0.75c0.15,0.3 0.30059,0.45 0.60059,0.75c0.15,0.15 0.45,0.45058 0.75,0.60058c0.3,0.15 0.45,0.29825 0.75,0.44825c0.3,0.15 0.59941,0.15175 0.89941,0.30175c0.3,0 0.59941,0.14942 0.89941,0.14942c0.3,0 0.59941,0.00059 0.89941,-0.14942c0.3,0 0.60234,-0.15175 0.90234,-0.30175c0.3,-0.15 0.6,-0.29825 0.75,-0.44825c0.3,-0.15 0.45,-0.30058 0.75,-0.60058c0.15,-0.15 0.44766,-0.45 0.59766,-0.75c0.15,-0.3 0.30117,-0.45 0.45117,-0.75c0.15,-0.3 0.14883,-0.59941 0.29883,-0.89942c0,-0.3 0.15234,-0.59941 0.15234,-0.89942c0,-0.3 -0.00234,-0.60234 -0.15234,-0.90234c0,-0.3 -0.14883,-0.59942 -0.29883,-0.89942c-0.15,-0.3 -0.30117,-0.6 -0.45117,-0.75c-0.15,-0.3 -0.29766,-0.45 -0.59766,-0.75c-0.15,-0.15 -0.45,-0.45058 -0.75,-0.60058c-0.3,-0.15 -0.45,-0.29825 -0.75,-0.44825c-0.45,0.15 -0.75176,0.15 -1.05176,0c-0.3,-0.075 -0.59941,-0.11425 -0.89941,-0.11425z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_ARRIVAL'" 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><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,102c-6.618,0 -12,-5.382 -12,-12h6c0,3.309 2.691,6 6,6c3.309,0 6,-2.691 6,-6h6c0,6.618 -5.382,12 -12,12z"></path><rect x="25" y="13" transform="scale(3,3)" width="14" height="2"></rect><rect x="16" y="49" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="45" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="41" transform="scale(3,3)" width="18" height="2"></rect><path d="M174,99v-9.024c0,-4.947 -4.029,-8.976 -8.976,-8.976h-18.864l-3.96,-11.886c-1.221,-3.657 -4.632,-6.114 -8.487,-6.114h-16.713v-6h12v-21c0,-4.962 -4.038,-9 -9,-9h-48c-4.962,0 -9,4.038 -9,9v21h12v6h-16.713c-3.855,0 -7.266,2.457 -8.487,6.117l-3.96,11.883h-18.864c-4.947,0 -8.976,4.029 -8.976,8.976v9.024h6v60h-6v6h156v-6h-6v-60zM69,51v-15c0,-1.656 1.344,-3 3,-3h48c1.656,0 3,1.344 3,3v15zM81,57h30v6h-30zM108,159h-66v-42h66zM150,129h-6v6h6v12h-18v-30h18zM132,153h18v6h-18zM162,159h-6v-42c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v42h-12v-42c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v42h-6v-60h42v-6h-48v-3.024c0,-1.641 1.335,-2.976 2.976,-2.976h45.024v-6h-19.839l3.327,-9.981c0.405,-1.206 1.53,-2.019 2.799,-2.019h75.429c1.269,0 2.394,0.813 2.799,2.016l3.324,9.984h-19.839v6h45.024c1.641,0 2.976,1.335 2.976,2.976v3.024h-48v6h42z"></path><path d="M105,75h-18c-4.962,0 -9,4.038 -9,9v9h36v-9c0,-4.962 -4.038,-9 -9,-9zM108,87h-24v-3c0,-1.656 1.344,-3 3,-3h18c1.656,0 3,1.344 3,3z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_UNPACKING'" 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><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M35.39941,47.39941l-16.04883,0.60059c-2.55,0.15 -4.50059,2.09941 -4.35059,4.64941c0.15,2.55 2.09941,4.35059 4.64941,4.35059l13.35059,-0.45117l23.25,40.5c0.9,1.5 2.39941,2.25 3.89941,2.25c0.75,0 1.5,-0.14766 2.25,-0.59766c2.1,-1.2 2.84942,-4.05234 1.64941,-6.15234l-24.59766,-42.89941c-0.9,-1.5 -2.40176,-2.25 -4.05176,-2.25zM133.65234,67.3916c-0.87187,-0.0668 -1.76426,0.10957 -2.55176,0.55957l-23.39941,13.5c-0.75,0.45 -0.90059,1.34766 -0.60059,2.09766l6,10.35059c1.2,2.1 0.45059,4.94941 -1.64941,6.14941l-7.80176,4.5c-2.1,1.2 -4.94941,0.45059 -6.14941,-1.64941l-6,-10.35059c-0.45,-0.75 -1.35059,-0.89766 -2.10059,-0.59766l-23.39941,13.5c-2.1,1.2 -2.84941,4.04941 -1.64941,6.14941l9.44824,16.35059c-15.3,1.8 -27.14883,14.99942 -27.29883,30.89941c0,8.85 3.60117,16.94942 9.45117,22.64942h-7.95117c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5h75c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-22.95117c1.2,-1.2 2.25234,-2.40059 3.15234,-3.60058c1.35,0.9 3.29883,1.04942 4.79883,0.14942l64.95117,-37.34766c2.1,-1.2 2.84942,-4.05234 1.64942,-6.15234l-37.35058,-64.94824c-0.75,-1.3125 -2.14453,-2.09766 -3.59766,-2.20899zM78,136.5h0.14941c12.45,0.15 22.50059,10.19941 22.35059,22.64942c-0.15,12.3 -10.2,22.35058 -22.5,22.35058c-12.6,-0.15 -22.65,-10.19941 -22.5,-22.64942c0.15,-12.3 10.2,-22.35058 22.5,-22.35058zM25.5,181.46192c-1.1625,0 -2.32441,0.41425 -3.14941,1.23925c-0.15,0.15 -0.45059,0.45 -0.60059,0.75c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89942c0,1.2 0.45058,2.39942 1.35058,3.14942c0.9,0.9 1.94941,1.35058 3.14941,1.35058c1.2,0 2.39941,-0.45058 3.14941,-1.35058c0.9,-0.9 1.35059,-1.94942 1.35059,-3.14942c0,-0.3 0.00059,-0.59941 -0.14941,-0.89942c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c0.15,-0.15 0.00059,-0.45 -0.14941,-0.75c-0.15,-0.3 -0.30059,-0.45 -0.60059,-0.75c-0.825,-0.825 -1.98691,-1.23925 -3.14941,-1.23925z"></path></g></g>
+                                                <g v-if="step.reference_id === 'PS_DELIVERY'" 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><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M177,126v-15c0,-4.962 -4.038,-9 -9,-9h-13.971c-1.221,0 -2.313,-0.732 -2.775,-1.863l-11.913,-29.163c-1.533,-3.066 -4.617,-4.974 -8.046,-4.974h-17.295v-9c0,-4.962 -4.038,-9 -9,-9h-49.767c-3.57,-8.784 -12.183,-15 -22.233,-15h-24v24c0,11.16 7.665,20.535 18,23.211v45.789c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h3h9.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h36.27h3h6.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h18.27h3c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM15,57v-18h18c9.927,0 18,8.073 18,18c0,9.927 -8.073,18 -18,18c-9.927,0 -18,-8.073 -18,-18zM57,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM74.73,138c-1.434,-8.499 -8.826,-15 -17.73,-15c-8.904,0 -16.293,6.501 -17.73,15h-6.27v-57c13.233,0 24,-10.767 24,-24c0,-1.017 -0.084,-2.016 -0.207,-3h48.207c1.656,0 3,1.344 3,3v18h-42v6h42v6h-30v6h30v6h-18v6h18v33zM138,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM138,123c-8.901,0 -16.293,6.501 -17.73,15h-6.27v-66h17.295c1.143,0 2.172,0.636 2.586,1.449l11.817,28.956c1.392,3.402 4.662,5.595 8.331,5.595h13.971c1.656,0 3,1.344 3,3v15h-6c-3.309,0 -6,2.691 -6,6v6h-3.27c-1.437,-8.499 -8.829,-15 -17.73,-15zM165,138v-6h6v6z"></path><path d="M45,54h-9v-9h-6v15h15z"></path><circle cx="19" cy="47" transform="scale(3,3)" r="2"></circle><circle cx="46" cy="47" transform="scale(3,3)" r="2"></circle><path d="M123,78h3.96c1.233,0 2.34,0.75 2.799,1.893l9.591,23.979c0.789,1.977 -0.666,4.128 -2.793,4.128h-13.557c-1.656,0 -3,-1.344 -3,-3v-24c0,-1.656 1.344,-3 3,-3z"></path></g></g>
+                                            </svg>
+                                            <div class="absolute" style="top: -2px;right: -6px;" v-if="step.complete === '1'">
+                                                <div class="bg-success btn-rounded no-padding">
+                                                    <div class="fs-8 text-white"><i class="fa fa-check fs-10 padding-5"></i></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-10">
+                                        <div class="col">
+                                            <small class="all-caps fs-11"  v-bind:class="[{'muted': step.complete === '0' &&  step.reference_id !== order.current_step.details.reference_id}, {'text-success': step.complete === '1'}]" style=" white-space: nowrap; "><span v-if="step.complete === '1'">{{step.details.final_name}}</span><span v-else>{{step.details.initial_name}}</span></small>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto no-padding hint-text" v-if="index !== (order.steps.length - 1)">
+                                    <div class="fs-15 m-b-25 " v-bind:class="[{'muted': step.complete !== '1'}]">
+                                        <i class="fa fa-ellipsis-h" style=" margin-right: 1px; "></i><i class="fa fa-ellipsis-h"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30">
+                <div class="col-3">
+                    <div class="row no-margin">
+                        <div class="col bg-white p-t-20 p-b-20 hint-text">
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <span class="all-caps muted fs-11">Shipping Address</span>
+                                </div>
+                            </div>
+                            <div class="row fs-12">
+                                <div class="col">
+                                    <order-delivery-address-component :data="this.order"></order-delivery-address-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-l-0 m-r-0 m-t-15 m-b-20">
+                        <div class="col bg-info p-t-20 p-b-20">
+                            <div class="row m-b-20">
+                                <div class="col"><span class="all-caps text-info-lighter hint-text fs-11 bold">Receive Note</span></div>
+                            </div>
+                            <div class="row fs-12">
+                                <div class="col">
+                                    <div class="row m-b-15">
+                                        <div class="col">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9">Warehouse</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps fs-11 text-white no-margin">GZ-BY-V01 广州白云江高仓库</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-auto">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9">Receive Date</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps text-warning no-margin bold fs-11">06/05/2019</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9    ">Tracking Number</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps no-margin text-white fs-11">432456453</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-20">
+                                        <div class="col"><small class="block text-complete-lighter pointer all-caps">Edit Note</small></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-7">
+                    <div class="row m-l-0 m-r-0 m-b-20">
+                        <ul class="nav" data-init-reponsive-tabs="dropdownfx">
+                            <li class="col-4 nav-item">
+                                <a href="#" class="active" data-toggle="tab" data-target="#overview">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab b-r">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="130" height="130"
+                                                     viewBox="0 0 192 192"
+                                                     style=" fill:#000000;"><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><g fill="#000000"><g id="surface1"><path d="M26.88,7.68v176.64h138.24v-176.64zM34.56,15.36h122.88v161.28h-122.88zM57.6,46.08v7.68h76.8v-7.68zM57.6,84.48v7.68h49.92v-7.68zM122.88,84.48v7.68h11.52v-7.68zM57.6,107.52v7.68h30.72v-7.68zM122.88,107.52v7.68h11.52v-7.68zM57.6,130.56v7.68h49.92v-7.68zM122.88,130.56v7.68h11.52v-7.68z"></path></g></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Overview</h5>
+                                            <small class="muted">Overview of the order's packing list, shipping and delivery details</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="col-4 nav-item">
+                                <a href="#" data-toggle="tab" data-target="#timeline">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab b-r">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="150" height="150"
+                                                     viewBox="0 0 192 192"
+                                                     style=" fill:#000000;"><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><g id="Слой_1" fill="#000000"><circle cx="32" cy="32" transform="scale(3,3)" r="4"></circle><path d="M96,21c-15.81,0 -30.78,4.866 -43.533,13.998l-9.132,-9.132c-1.572,-1.569 -3.804,-2.208 -5.967,-1.692c-2.163,0.51 -3.876,2.073 -4.578,4.185l-8.28,24.828c-1.173,3.516 -0.273,7.326 2.346,9.948c1.863,1.863 4.323,2.856 6.855,2.856c1.032,0 2.076,-0.168 3.099,-0.507l24.831,-8.274c2.109,-0.702 3.675,-2.418 4.185,-4.578c0.51,-2.166 -0.123,-4.398 -1.695,-5.967l-7.368,-7.371c11.556,-8.022 25.029,-12.294 39.237,-12.294c38.046,0 69,30.951 69,69c0,38.049 -30.954,69 -69,69c-38.046,0 -69,-30.951 -69,-69h-6c0,41.355 33.645,75 75,75c41.355,0 75,-33.645 75,-75c0,-41.355 -33.645,-75 -75,-75zM59.988,51.255c-0.048,0.198 -0.189,0.246 -0.243,0.267l-24.831,8.277c-1.374,0.45 -2.793,0.12 -3.813,-0.903c-1.017,-1.017 -1.353,-2.442 -0.897,-3.81l8.277,-24.831c0.015,-0.051 0.063,-0.195 0.267,-0.243c0.033,-0.009 0.066,-0.012 0.096,-0.012c0.141,0 0.219,0.078 0.249,0.108l20.799,20.802c0.036,0.036 0.144,0.147 0.096,0.345z"></path><path d="M68.121,128.121l19.62,-19.62c2.373,1.572 5.208,2.499 8.259,2.499c8.271,0 15,-6.729 15,-15c0,-7.245 -5.163,-13.302 -12,-14.697v-24.303h-6v24.303c-6.837,1.395 -12,7.452 -12,14.697c0,3.054 0.927,5.886 2.499,8.259l-19.62,19.62zM96,87c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9z"></path><path d="M96,159c34.74,0 63,-28.263 63,-63h-6c0,31.431 -25.569,57 -57,57z"></path></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Timeline</h5>
+                                            <small class="muted">View order's detailed history outlining the order's every step and update</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="col-4 nav-item">
+                                <a href="#" data-toggle="tab" data-target="#payments">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="150" height="150"
+                                                     viewBox="0 0 192 192"
+                                                     style=" fill:#000000;"><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><g id="Слой_1" fill="#000000"><rect x="49" y="12" transform="scale(3,3)" width="2" height="36"></rect><path d="M153,30h-6v-3c0,-4.962 -4.038,-9 -9,-9h-96c-4.962,0 -9,4.038 -9,9v105v9v12c0,4.962 4.038,9 9,9h9v3c0,4.962 4.038,9 9,9h39h18h3c4.962,0 9,-4.038 9,-9v-3h9c4.962,0 9,-4.038 9,-9v-3h6c3.309,0 6,-2.691 6,-6v-108c0,-3.309 -2.691,-6 -6,-6zM39,27c0,-1.653 1.344,-3 3,-3h96c1.656,0 3,1.347 3,3v105v9c0,1.653 -1.344,3 -3,3h-9v-18h-12h-18h-48v18h-9c-1.656,0 -3,-1.347 -3,-3v-9zM42,156c-1.656,0 -3,-1.347 -3,-3v-3.552c0.942,0.336 1.944,0.552 3,0.552h9v6zM60,168c-1.656,0 -3,-1.347 -3,-3v-33h18v15h6v-15h6v21h6v-21h6v36zM105,168v-36h6v36zM123,165c0,1.653 -1.344,3 -3,3h-3v-36h6zM138,156h-9v-6h9c1.056,0 2.058,-0.216 3,-0.552v3.552c0,1.653 -1.344,3 -3,3zM153,144h-6v-3v-9v-96h6z"></path><path d="M57,60h66c3.309,0 6,-2.691 6,-6v-12c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v12c0,3.309 2.691,6 6,6zM57,42h66v12h-66z"></path><path d="M57,84h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,72h6v6h-6z"></path><path d="M123,66h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,78h-6v-6h6z"></path><path d="M57,108h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,96h6v6h-6z"></path><path d="M81,84h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM81,72h18v6h-18z"></path><path d="M75,102c0,3.309 2.691,6 6,6h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6zM81,96h18v6h-18z"></path><path d="M123,90h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,102h-6v-6h6z"></path><rect x="19" y="38" transform="scale(3,3)" width="22" height="2"></rect><rect x="35" y="44" transform="scale(3,3)" width="2" height="12"></rect></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Payments</h5>
+                                            <small class="muted">View order's outstanding payments and payment's receipts</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="tab-content">
+                        <div class="tab-pane fade show active" id="overview">
+                            <div class="row no-margin">
+                                <div class="col">
+                                    <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="col">
+                                                    <small class="bold all-caps">Packing List</small>
+                                                </div>
+                                                <div class="col text-right">
+                                                    <small class="all-caps text-complete pointer">Edit List</small>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg 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>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg 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>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg 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>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style=" fill:#000000;">
+                                                                <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>
+                                                                    <g fill="#4d6286">
+                                                                        <g id="surface1">
+                                                                            <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
+                                                                        </g>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">3</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-4 bg-master-lighter p-t-15 p-b-15 hint-text">
+                                    <div class="row m-b-20 fs-12">
+                                        <div class="col">
+                                            <div class="row m-l-0 m-r-0 m-b-5">
+                                                <div class="col no-padding b-b" style="border-color: rgb(204, 204, 204);">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="bold all-caps p-b-5 no-margin hint-text" >Shipping</div>
+                                                        </div>
+                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row m-b-5 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8"></i></div>
+                                                    </div>
+                                                    <div class="row m-b-5 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-danger fs-8"></i></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 b-b" style="border-color: rgb(204, 204, 204);">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="bold all-caps p-b-5 no-margin hint-text" >Delivery</div>
+                                                        </div>
+                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row m-b-10 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8"></i></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="timeline">
+                            <div class="row fs-12 m-l-0 m-r-0 m-b-20"><div class="col p-l-0 p-r-0 bg-white">
+                                <div class="row all-caps muted m-l-0 m-r-0 m-b-15 p-t-10 p-b-10 b-b b-grey">
+                                    <div class="col">
+                                        <small class="bold all-caps">Order's History</small>
+                                    </div>
+                                </div>
+                                <div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Custom clearance is successful</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Arrived to Malaysian port</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">[ETD: 2019-05-06, ETA: 2019-05-09] Your Order has been scheduled for shipping </div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                09-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Invoice has been issued, waiting for shipping payment</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                09-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">[44 Packages, 32.30 CBM] Your order has been loaded into container</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                06-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Arrived at Collier-Fadel warehouse in china</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                21-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Collier-Fadel confirmed as your order's warehouse</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                21-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Order number has been created</div></div></div></div></div></div>
+                        </div>
+                        <div class="tab-pane fade" id="payments">
+                            <div class="row m-b-20">
+                                <div class="col">
+                                    <div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
+                                        <div class="col no-padding">
+                                            <small class="all-caps muted bold">Invoices</small>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Invoice No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-danger bold all-caps">Unpaid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Shipping</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Invoice No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-danger bold all-caps">Unpaid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Service</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
+                                        <div class="col no-padding">
+                                            <small class="all-caps muted bold">Receipts</small>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Receipt No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">Paid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Shipping</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Receipt No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">Paid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Service</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col no-padding">
+                            <div class="btn btn-sm btn-block btn-success b-rad-none requestModal">Order Packed</div>
+                        </div>
+                    </div>
+                    <div class="row b-a b-grey">
+                        <div class="col bg-white">
+                            <div class="row p-t-5 p-b-5 bg-master-lighter">
+                                <div class="col fs-11"><small class="all-caps text-info bold ">Order Information</small></div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row bg-master-lightest">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps ">Date Created:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">02-05-2019</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps ">Total CBM:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">3.12</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row bg-master-lightest">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps">Number of Packages:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">14</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-t-20">
+                        <div class="col bg-white">
+                            <div class="row bg-master-lighter text-success p-t-5 p-b-5 ">
+                                <div class="col fs-11"><small class="all-caps bold">Payment Summary</small></div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row p-t-10 m-b-5 m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Shipping Fee</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 212.25</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row m-b-5 m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Service Fee</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 41.25</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row p-b-5 b-b b-grey m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Discount</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 0.00</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row align-items-end p-t-5 p-b-10 no-margin">
+                                                <div class="col-auto no-padding ">
+                                                    <div class="row">
+                                                        <div class="col"><small class="all-caps">Paid</small></div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col"><small class="bold text-primary no-margin">RM 00.00</small></div>
+                                                    </div>
+                                                </div>
+                                                <div class="col no-padding text-right">
+                                                    <div class="row">
+                                                        <div class="col"><small class="all-caps">Outstanding</small></div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <h6 class="bold text-success no-margin">RM 353.50</h6>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['data'],
+        data() {
+            return {
+                orderId: this.data,
+                order: null
+            }
+        },
+        created(){
+            this.fetchOrder();
+        },
+        methods: {
+            fetchOrder(){
+
+                fetch(route('api.order.profile', {'id': this.orderId})).then(response => response.json())
+                    .then(response => {
+                        this.order = response.data;
+                    })
+                    .catch(error => console.log(error))
+            },
+            iconColor(complete, isCurrentStep){
+                if(complete === '1'){
+                    return '#47b5ab';
+                }
+
+                if(isCurrentStep){
+                    return '#4d6286';
+                }
+
+                return '#bababa';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue b/resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
similarity index 76%
rename from resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue
rename to resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
index b7615d6..47485f2 100644
--- a/resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="row m-t-5">
+    <div class="row">
         <div class="col">
             <div class="row">
                 <div class="col">
@@ -13,14 +13,7 @@
                             <small class="muted all-caps">Delivery Address</small>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="bold m-b-5">{{this.order.address.reference}}</div>
-                            <div class="hint-text semi-bold">{{this.order.address.contact}}</div>
-                            <div class="m-t-15 m-b-15 hint-text">{{this.order.address.street_one || ''}} {{ this.order.address.street_two || '' }} {{this.order.address.city || '' }} {{this.order.address.post_code || ''}} {{this.order.address.state || ''}} {{this.order.address.country || ''}}</div>
-                            <small class="block text-complete text-underline pointer">Change Address</small>
-                        </div>
-                    </div>
+                    <order-delivery-address-componenet :data="this.data"></order-delivery-address-componenet>
                 </div>
                 <div class="col-9 p-l-0">
                     <div class="row m-l-0 m-r-0 m-b-15">
@@ -54,7 +47,9 @@
 </template>
 
 <script>
+    import OrderDeliveryAddressComponenet from "./OrderDeliveryAddressComponenet";
     export default {
+        components: {OrderDeliveryAddressComponenet},
         props: {
             'data': {
                 required: true
diff --git a/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue b/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue
deleted file mode 100644
index 64b468c..0000000
--- a/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <div class="row m-t-50">
-        <div class="col">
-            <div class="row">
-                <div class="col-6 bg-white">
-                    <order-header-component :data="this.order"></order-header-component>
-                </div>
-            </div>
-            <div class="row m-t-30">
-                <div class="col-9 bg-white">
-                    <order-history-component :data="this.order"></order-history-component>
-                </div>
-                <div class="col">
-                    <order-action-component :data="this.order"></order-action-component>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-        props: ['data'],
-        data() {
-            return {
-                orderId: this.data,
-                order: null
-            }
-        },
-        created(){
-            this.fetchOrder();
-        },
-        methods: {
-            fetchOrder(){
-                fetch(route('api.order.profile', {'id': this.orderId})).then(response => response.json())
-                    .then(response => {
-                        this.order = response.data;
-                    })
-                    .catch(error => console.log(error))
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue b/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
index ec4cc21..8ca1bab 100644
--- a/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
@@ -14,137 +14,232 @@
                             </div>
                         </div>
                     </div>
-                    <form method="post" >
-                        <div class="form-group form-group-default input-group">
-                            <div class="row w-100">
-                                <div class="col no-padding">
-                                    <label class="muted block">Packing List No.</label>
-                                    <input class="form-control block" v-model="packingList.reference_no">
-                                </div>
+                    <div class="form-group form-group-default input-group">
+                        <div class="row w-100">
+                            <div class="col no-padding">
+                                <label class="muted block">Packing List No.</label>
+                                <input class="form-control block" v-model="packingList.reference_no">
                             </div>
                         </div>
-                        <div class="row m-b-15" v-for="(item, index) in packingList.packages">
-                            <div class="col p-b-15 bg-master-lightest">
-                                <div class="row p-t-10 p-b-10">
-                                    <div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
-                                        <span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
-                                    </div>
-                                    <div class="col-auto text-danger no-padding">
-                                        <i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col p-l-0">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Description</label>
-                                                    <input class="form-control block" v-model="item.description">
+                    </div>
+                    <div class="row m-l-0 m-r-0 m-b-15">
+                        <div class="col no-padding">
+                            <div class="row packages" v-for="i in Math.ceil(packingList.packages.length / 3)">
+                                <div class="col-4 b-r b-grey bg-master-lightest no-padding text-center package-thumbnail"  v-for="(item, index) in packingList.packages.slice((i - 1) * 3, i * 3)">
+                                    <div class="row">
+                                        <div class="col no-padding">
+                                            <div class="row">
+                                                <div class="col no-padding text-left">
+                                                    <div class="status-border"  :class="[{'active': item.length > 0 && item.height > 0 && item.width > 0 && item.description !== '' }]"></div>
+                                                </div>
+                                                <div class="col text-right no-padding">
+                                                    <i @click="removePackage(index)" class="fa fa-times  text-white bg-danger padding-5 pointer"></i>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="col-4 no-padding">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Quantity</label>
-                                                    <input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding h-100">
-                                                                <div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
-                                                                    <div class="col p-l-10 p-r-10">
-                                                                        <i class="fa fa-angle-up text-success"></i>
-                                                                    </div>
-                                                                </div>
-                                                                <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
-                                                                    <div class="col p-l-10 p-r-10">
-                                                                        <i class="fa fa-angle-down text-success"></i>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
+                                    <div class="row align-items-center justify-content-center p-t-25 p-b-25">
+                                        <div class="col-auto hint-text p-r-10">
+                                            <svg v-if="item.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" 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>
+                                                    <g fill="#000">
+                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                            <svg v-if="item.type === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" 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>
+                                                    <g fill="#000">
+                                                        <g id="surface1">
+                                                            <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
+                                                        </g>
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                        </div>
+                                        <div class="col-auto no-padding">
+                                            <i class="fa fa-times fs-14 lh-26"></i>
+                                        </div>
+                                        <div class="col text-left p-l-10">
+                                            <div class="row">
+                                                <div class="col no-padding"><input type="text" class="fs-22 bold b-l b-t b-b b-grey bg-transparent w-100 h-100 font-montserrat p-l-10" v-model="item.quantity" v-on:keypress="isNumber(true)"></div>
+                                                <div class="col-auto bg-master-lighter no-padding h-100">
+                                                    <div @click="item.quantity++" class="row align-items-center justify-content-center h-50 pointer">
+                                                        <div class="col p-l-5 p-r-5">
+                                                            <i class="fa fa-angle-up text-success"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50 pointer">
+                                                        <div class="col p-l-5 p-r-5">
+                                                            <i class="fa fa-angle-down text-success"></i>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col p-l-5 p-r-0">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Length</label>
-                                                    <input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col p-l-0 p-r-5">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Width</label>
-                                                    <input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col p-l-5 p-r-5">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Height</label>
-                                                    <input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+                                    <div class="row">
+                                        <div class="col-auto p-t-5 p-b-5 bg-master-light">
+                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                 width="15" height="15"
+                                                 viewBox="0 0 192 192"
+                                                 style=" fill:#000000;"><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><g fill="#000000"><path d="M6,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v180c0,2.55 1.95,4.5 4.5,4.5h33c2.55,0 4.5,-1.95 4.5,-4.5v-180c0,-2.55 -1.95,-4.5 -4.5,-4.5zM75,1.5c-10.8,0 -19.5,8.7 -19.5,19.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-5.85 4.65,-10.5 10.5,-10.5h76.5v10.5c0,10.8 8.7,19.5 19.5,19.5h14.39942h0.60058c1.8,0 3.45117,-1.20117 4.20117,-2.70117c0.3,-0.6 0.44825,-1.19883 0.44825,-1.79883v-0.60059c-0.3,-9 -3.89825,-17.39824 -10.19825,-23.69824c-6.6,-6.6 -15.15117,-10.20117 -24.45117,-10.20117zM10.5,10.5h24v171h-24v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5zM160.5,10.95117c5.1,0.9 9.75,3.29883 13.5,7.04883c3.75,3.75 6.14883,8.4 7.04883,13.5h-10.04883c-5.85,0 -10.5,-4.65 -10.5,-10.5zM59.71289,40.54395c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v141c0,2.55 1.95,4.5 4.5,4.5h126c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-126,-141c-0.9,-1.0125 -2.22188,-1.51934 -3.58594,-1.45605zM186,51c-2.55,0 -4.5,1.95 -4.5,4.5v100.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-100.5c0,-2.55 -1.95,-4.5 -4.5,-4.5zM64.5,56.85059l111.45117,124.64941h-111.45117zM89.71289,119.14453c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v32.39941c0,2.55 1.95,4.5 4.5,4.5h28.95117c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-28.95117,-32.39941c-0.9,-1.0125 -2.22187,-1.51934 -3.58594,-1.45605zM94.5,135.45117l14.39941,16.04883h-14.39941z"></path></g></g></svg>
+                                            <div class="absolute padding-5 bg-danger btn-rounded" style=" right: 10px; top: 6px; ">
 
+                                            </div>
+                                        </div>
+                                        <div class="col no-padding">
+                                            <input type="text" class="fs-12 bold bg-master-lighter no-border w-100 font-montserrat p-l-15 p-r-15 p-t-5 p-b-5 thumbnail-input" placeholder="Description" v-model="item.description">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col p-l-0">
-                                <div @click="AddPackage" class="btn btn-xs btn-complete pointer all-caps b-rad-none"><i class="fa fa-plus m-r-0"></i> Add Package</div>
+                    </div>
+                    <div class="row m-b-15" v-for="(item, index) in packingList.packages">
+                        <div class="col p-b-15 bg-master-lightest">
+                            <div class="row p-t-10 p-b-10">
+                                <div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
+                                    <span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
+                                </div>
+                                <div class="col-auto text-danger no-padding">
+                                    <i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
+                                </div>
                             </div>
-                            <div class="col-auto no-padding">
-                                <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                <button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
+                            <div class="row">
+                                <div class="col p-l-0">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Description</label>
+                                                <input class="form-control block" v-model="item.description">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-4 no-padding">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Quantity</label>
+                                                <input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding h-100">
+                                                            <div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
+                                                                <div class="col p-l-10 p-r-10">
+                                                                    <i class="fa fa-angle-up text-success"></i>
+                                                                </div>
+                                                            </div>
+                                                            <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
+                                                                <div class="col p-l-10 p-r-10">
+                                                                    <i class="fa fa-angle-down text-success"></i>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col p-l-5 p-r-0">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Length</label>
+                                                <input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col p-l-0 p-r-5">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Width</label>
+                                                <input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col p-l-5 p-r-5">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Height</label>
+                                                <input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="row m-b-20">
+                        <div class="col no-padding">
+                            <div class="row ">
+                                <div @click="AddPackage(0)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
+                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
+                                        <div class="col padding-15" style=" height: 125px; "><img src="https://www.pngarts.com/files/1/Package-Box-PNG-Free-Download.png" style="width: 100%;"></div>
+                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Carton</small></div>
+                                    </div>
+                                </div>
+                                <div @click="AddPackage(1)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
+                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
+                                        <div class="col padding-15" style=" height: 125px; "><img src="http://iconbug.com/data/6e/256/2f229a2663bc61dfe5aedeace2ca8837.png" style="width: 100%;"></div>
+                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Pallet</small></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </form>
+                    </div>
+                    <div class="row">
+                        <div class="col text-right no-padding">
+                            <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
+                            <button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </modal-component>
@@ -201,7 +296,47 @@
         </modal-component>
     </div>
 </template>
+<style>
+    .plus-thumbnail {
+        display: flex;
+        opacity: 0.4;
+        background-color: #fff;
+    }
+    .add-package:hover .plus-thumbnail {
+        background-color: #ececec;
+        color: #787878;
+    }
+    .add-package:hover .title {
+        color: #bababa;
+    }
+    .thumbnail-input::-webkit-input-placeholder { /* Edge */
+        color: #bababa;
+        font-weight: normal !important;
+    }
 
+    .thumbnail-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: #bababa;
+        font-weight: normal !important;
+    }
+
+    .thumbnail-input::placeholder {
+        color: #bababa;
+        font-weight: normal !important;
+    }
+    .packages .package-thumbnail:last-child {
+        border-right : none !important;
+    }
+    .package-thumbnail .status-border {
+        border-style: solid;
+        border-width: 7px 8px 0 0;
+        border-color: transparent;
+        border-top-color: #ececec ;
+    }
+    .package-thumbnail .status-border.active {
+        border-top-color: #47b5ab;
+        opacity: 0.6;
+    }
+</style>
 <script>
     import notificationConstant from '../../../../../js/notification';
     export default {
@@ -219,13 +354,7 @@
                 packingList: {
                     reference_no: '',
                     confirmed: 0,
-                    packages: [{
-                        description: '',
-                        quantity: 1,
-                        width: 0.0,
-                        height: 0.0,
-                        length: 0.0
-                    }]
+                    packages: []
                 },
                 actionData: {
                     complete_date: ''
@@ -294,9 +423,10 @@
 
                 })
             },
-            AddPackage(){
+            AddPackage(type){
                 this.packingList.packages.push({
                     description: '',
+                    type: type,
                     quantity: 1,
                     width: 0.0,
                     height: 0.0,
diff --git a/resources/views/partials/general/menu.blade.php b/resources/views/partials/general/menu.blade.php
index b2c5e4e..c97bf47 100644
--- a/resources/views/partials/general/menu.blade.php
+++ b/resources/views/partials/general/menu.blade.php
@@ -1,5 +1,5 @@
 <div class="bg-white b-b b-grey">
-    <div class="container no-padding">
+    <div class="container">
         <div class="menu-bar header-sm-height" data-pages-init='horizontal-menu' data-hide-extra-li="2">
             <a href="#" class="btn-link toggle-sidebar hidden-lg-up pg pg-close" data-toggle="horizontal-menu">
             </a>
diff --git a/routes/api.php b/routes/api.php
index 4be1fe1..626f129 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -125,7 +125,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
 
         Route::post('/{orderId}/update', 'updateOrderStepController@update')->name('step.update');
 
-        Route::post('/{orderId}/packing-list', 'OrderController@updatePackingList')->name('packages.update');
+        Route::post('/{orderId}/packing-list', 'UpdatePackingListController@update')->name('packages.update');
 
         Route::post('/{orderId}/shipping-arrangement', 'OrderController@orderShippingArrangement')->name('shipping.arrangement.create');
         Route::post('/{orderId}/shipping-arrangement/reschedule', 'OrderController@rescheduleShipping')->name('shipping.arrangement.reschedule');