diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
index b3a1b289..e4859da8 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
@@ -1,36 +1,4 @@
 <style scoped>
-    .batteryContainer {
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    
-    .batteryOuter {
-      border-radius: 3px;
-      border: 1px solid #444;
-      width: 25px;
-      height: 9px;
-    }
-    
-    .batteryBump {
-      border-radius: 2px;
-      background-color: #444;
-      margin: 2px;
-      width: 1px;
-      height: 3px;
-    }
-    
-    #batteryLevel {
-      border-radius: 2px;
-      background-color: #73AD21;
-      width: 18px;
-      height: 7px;
-    }
-    
     .percentageContainer{
         width: 100px;
         height: 100px;
@@ -41,7 +9,6 @@
         position: absolute;
         width: calc(100% - 2px);
         height: calc(100% - 2px);
-        background: #73AD21;
         margin: 1px;
         display: flex;
         justify-content: center;
@@ -57,90 +24,196 @@
         justify-content: center;
         align-items: center;
     }
-    </style>
+
+    /* timeline */
+     ul.timeline_ul {
+        list-style-type: none;
+        position: relative;
+    }
+
+    ul.timeline_ul:before {
+        content: ' ';
+        background: #d4d9df;
+        display: inline-block;
+        position: absolute;
+        left: 21px;
+        width: 2px;
+        height: 100%;
+        z-index: 1;
+        margin-top: 13px;
+    }
+
+    ul.timeline_ul>li {
+        margin: 10px 0;
+        padding-left: 20px;
+    }
+
+    ul.timeline_ul>li:before {
+        content: ' ';
+        display: inline-block;
+        position: absolute;
+        left: 12px;
+        z-index: 1;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-top: 3px;
+        opacity: 12%;
+    }
+    ul.timeline_ul>li .row:before {
+        content: ' ';
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        z-index: 2;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-top: 7px;
+    }
+
+    ul.timeline_ul>li.bg-blue:before,
+    ul.timeline_ul>li.bg-blue .row:before {
+        background: #00CFE8;
+    }
+
+    ul.timeline_ul>li.bg-purple:before,
+    ul.timeline_ul>li.bg-purple .row:before {
+        background: #7367F0;
+    }
+
+    ul.timeline_ul>li.bg-orange:before,
+    ul.timeline_ul>li.bg-orange .row:before {
+        background: #FF9F43;
+    }
+
+    /* delivery_status_ul */
+    .delivery_status{
+        position: relative;
+    }
+
+    .delivery_status hr{
+        background: #A6A6A6;
+        display: block;
+        height: 2px;
+        width: 100%;
+    }
+
+    .delivery_status .overlay12 {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+
+        justify-content: space-between;
+        align-self: center;
+        display: flex;
+    }
+
+    .delivery_status .overlay12 .dot {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-top: auto;
+        margin-bottom: auto;
+
+        border: 2px solid #A6A6A6;
+        background-color: white;
+    }
+
+    .delivery_status .overlay12 .dot.checked {
+        border: 2px solid #912873;
+        background-color: #912873;
+        position:relative;
+    }
+
+    .delivery_status .overlay12 .dot.checked::before {
+        font-family: FontAwesome;
+        position:absolute;
+        top:0;
+        content: "\f00c"; 
+        color: white;
+
+        margin-left: 3px;
+        display: block;
+        font-size: 10px;
+    }
+
+    .line_div{
+        height: 36px;
+    }
+
+    .status_p{
+        top: 25px;
+        left: -40px;
+        width: 100px;
+    }
+</style>
     <template>
     <div class="row">
         <div class="col">
-            <div class="row align-items-center">
-                <div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
+            <div class="row align-items-center m-t-10">
+                <div class="col bg-master-lightest rounded padding-20 m-l-10 m-r-10">
                     <div class="row d-flex justify-content-between align-items-center">
-                        <div class="col-auto">
+                        <div class="col b-r">
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="bold m-b-0">{{container.container_reference}}</h5>
-                                    <p>{{container.container_number}}</p>
+                                    <p class="m-b-0 large-text normal m-b-10">Container Number</p>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <p class="m-t-0">Container Type: {{container.container_type}}</p>
+                                    <p class="m-t-0 m-b-0 fs-20 bold">{{container.container_reference}}</p>
+                                    <p class="m-t-0 m-b-0 small-text">{{container.container_number}}</p>
+                                    <p class="m-t-0 m-b-0 small-text">seal number</p>
                                 </div>
                             </div>
                         </div>
-                         <div class="col-auto">
+                        <div class="col">
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-b-0 large-text normal l-20">ETD</h5>
+                                    <p class="fs-10 bold m-b-0">ETD</p>
+                                    <p class="small-text m-t-0">{{container.transport.current_schedule.etd}}</p>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
+                                    <p class="fs-10 bold m-b-0">ETA</p>
+                                    <p class="small-text m-t-0">{{container.transport.current_schedule.eta}}</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto">
+                        <div class="col">
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-b-0 large-text normal l-20">ETA</h5>
+                                    <p class="fs-10 bold m-b-0">Location</p>
+                                    <p class="small-text m-t-0">Guangzhou, China</p>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
+                                    <p class="fs-10 bold m-b-0">Destination</p>
+                                    <p class="small-text m-t-0">Port Klang, Malaysia</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto">
+                         <div class="col">
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
+                                    <p class="fs-10 bold m-b-0">Container Type</p>
+                                    <p class="small-text m-t-0">{{container.container_specification.name}}</p>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-auto">
-                            <div class="row">
-                                <div class="col">
-                                    <h5 class="m-b-0 large-text normal l-20">Destination port</h5>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col">
-                                    <h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-auto p-r-50">
-                            <div class="row">
-                                <div class="col">
-                                    <h5 class="m-b-0 large-text normal l-20">Status</h5>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col">
-                                    <h5 class="m-t-0 large-text">{{container.status}}</h5>
+                                     <p class="fs-10 bold m-b-0">Owner</p>
+                                    <p class="small-text m-t-0">Greenway Logistic</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-    
             <div class="row m-t-10 m-b-50">
                 <div class="col">
                     <div class="row">
@@ -171,123 +244,169 @@
                 </div>
             </div>
 
-            <!-- <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="confirmStatus">
-                <div class="row" style="width: 400px; margin: auto;">
-                    <div class="col bg-white padding-40 b-rad-lg">
-                        <div class="absolute" style="right: -25px; top: -10px;">
-                            <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
-                        </div>
-                        <div class="row m-auto" style="width: 300px;">
-                            <div class="col text-center">
-                                <p>Plese upload required documents eg bill of lading, license, etc. before send container to port of loading</p>
-                            </div>
-                        </div>
-                        <div class="row m-auto mt-10">
-                            <div class="col b-a b-rad-lg">
-                                <div class="row justify-content-center align-items-center">
-                                    <div class="col-auto padding-40">
-                                        <div class="row justify-content-center align-items-center">
-                                            <div class="col-auto">
-                                                <i class="fa fa-upload fs-50 m-t-10 text-master-lighter"></i>
-                                            </div>
-                                        </div>
-                                        <div class="row">
-                                            <div class="col">
-                                                <p>Drag and drop here</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row m-t-15">
-                            <div class="col">
-                                <div class="btn btn-complete w-100 btn-lg">Browse</div>
-                            </div>
-                            <div class="col">
-                                <div class="btn btn-primary w-100 btn-lg">Next</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </modal-component> -->
-
             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="rescheduleDate">
                 <reschedule-date-form-component :section="section" :data="container"></reschedule-date-form-component>
             </modal-component>
-
             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerDepature">
                 <container-depature-form-component :section="section" :data="container"></container-depature-form-component>
             </modal-component>
-
             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerArrival">
                 <container-arrival-form-component :section="section" :data="container"></container-arrival-form-component>
             </modal-component>
-
             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerUnpacking">
                 <container-unpacking-form-container :section="section" :data="container"></container-unpacking-form-container>
             </modal-component>
-    
-            <div class="row m-t-20">
-                <div class="col bg-master-light rounded m-l-10 m-r-10">
-                    <div class="row align-items-center p-t-10 p-b-10 padding-10">
-                        <div class="col-auto">
-                            <div class="row">
-                                <div class="col">
-                                    <h5 class="bold m-b-0">Package List</h5>
-                                    <p>(Total 77 Package in this container)</p>
-                                </div>
-                            </div>
-                        </div>
-                         <div class="col-auto">
-                            <p class="m-b-0">{{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%</p>
-                        </div>
-                            <div class="batteryContainer">
-                                <div class="batteryOuter">
-                                    <div id="batteryLevel" :style="{ width: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
-                                </div>
-                                <div class="batteryBump"></div>
-                            </div>
-                        <div class="col">
-                            <div class="btn btn-default">
-                                Add Package
-                            </div>
-                            <div class="btn btn-default">
-                                Export List
-                            </div>
-                            <div class="btn btn-default">
-                                Print Custom
-                            </div>
-                        </div>
-                        <div class="col-auto p-r-30">
-                            <h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
-                            <h5 class="m-t-0 text-right">__</h5>
-                        </div>
-                    </div>
+
+            <div class="row m-t-40 m-b-0">
+                <div class="col">
+                    <h5 class="bold m-b-40">Overview</h5>
                     <div class="row">
-                        <div class="col">
-                            <div class="percentageContainer">
-                                <div class="percentageInner" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
-                                <div class="percentageInnerText">
+                        <div class="col-auto">
+                            <div class="percentageContainer rounded bg-master-lightest b-grey">
+                                <div class="percentageInner bg-primary rounded-bottom" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
+                                <div class="percentageInnerText muted">
                                      {{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%
                                 </div>
                             </div>
                         </div>
                         <div class="col">
+                            <p class="m-b-5 muted">Container No #{{container.container_number}}</p>
+                            <h5 class="m-b-5 m-t-0 bold">Your order(s) are ready for shipment</h5>
+                            <p class="m-b-5 m-t-0 muted">Total 1 package(s) in this container</p>
+                            <p class="m-b-5 m-t-0">Loaded CBM: <span class="text-complete bold fs-20">{{loadedCBM}}</span></p>
+                        </div>
+                        <div class="col-auto">
+                            <a class="btn btn-sm btn-danger b-rad-none all-caps requestModal rounded" data-type="rescheduleDate">Reschedule Date form</a>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col padding-20 p-l-40 p-r-50">
-                            <!-- table -->
-                            <div class="row" v-for="packingList in container.packing_lists">
+                    <div class="row m-t-40">
+                        <div class="col">
+                            <div class="row m-l-30 m-r-30 m-b-50">
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <div class="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
-                                                <div class="col">{{package_item.description}}</div>
-                                                <div class="col">Quantity: {{package_item.quantity}}</div>
-                                                <div class="col">cbm:{{ package_item.cbm }}</div>
-                                                <div class="col">Remark</div>
+                                            <div class="delivery_status">
+                                                <div class="line_div w-100 justify-content-center align-content-center d-flex">
+                                                    <hr>
+                                                </div>
+                                                <div class="overlay12 p-l-0">
+                                                    <div class="dot checked">
+                                                        <div class="position-relative">
+                                                            <div class="status_p text-center position-absolute">Warehouse-CN(K2921)</div>
+                                                        </div>
+                                                    </div>
+                                                        <div class="dot requestModal pointer disabled" data-type="rescheduleDate">
+                                                            <div class="position-relative">
+                                                            <div class="status_p text-center position-absolute">Loading<br>Port</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="dot">
+                                                        <div class="position-relative">
+                                                            <div class="status_p text-center position-absolute">In<br>Transit</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="dot">
+                                                        <div class="position-relative">
+                                                            <div class="status_p text-center position-absolute">Discharge<br>Port</div>
+                                                        </div>
+                                                    </div>
+                                                        <div class="dot">
+                                                        <div class="position-relative">
+                                                            <div class="status_p text-center position-absolute">Warehouse-MY(M2525)</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <br>
+                                    <br>
+                                </div>
+                            </div>
+                            <div class="row m-t-50">
+                                <div class="col">
+                                    <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Search by Package Name, Package Number...">
+                                </div>
+                                <div class="col-auto">
+                                    <div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
+                                        Print Custom
+                                    </div>
+                                    <div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
+                                        Export List
+                                    </div>
+                                    <div class="btn rounded btn-primary p-t-10 p-b-10">
+                                        <div><i class="fa fa-plus m-r-10"></i>Add Container</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row m-t-50">
+                                <div class="col">
+                                    <div class="row" v-for="packingList in container.packing_lists">
+                                        <div class="col">
+                                            <div class="row m-t-10 b-a rounded b-grey m-l-5 m-r-5 padding-10 p-t-20 p-b-20" v-for="package_item in packingList.packages">
+                                                <div class="col">
+                                                    <div class="row">
+                                                        <div class="col-auto hide">
+                                                            <svg width="97" height="80" viewBox="0 0 97 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                <path d="M60.087 79.4989L0.178711 59.8679V13.3069L60.087 26.6089V79.4989Z" fill="#D3B875"/>
+                                                                <path d="M96.2289 58.07L60.0823 79.5V26.61L96.2289 8.46899V58.07Z" fill="#B78C58"/>
+                                                                <path d="M0.175781 13.3119L36.7404 0.00390625L96.2288 8.47189L60.087 26.6119L0.175781 13.3119Z" fill="#F2D08B"/>
+                                                                <path opacity="0.6" d="M17.5637 6.97882L74.0242 19.8788L75.1844 40.9638L77.1729 43.9878L78.1566 40.0988L79.4932 41.3088L80.8192 38.5438L81.8135 40.0988L80.5344 16.3498L22.5418 5.16382L17.5637 6.97882Z" fill="#846B3D"/>
+                                                                <path opacity="0.6" d="M24.7881 18.7679L60.0842 3.31787L66.0891 4.17287L32.2254 20.4189L24.7881 18.7679Z" fill="#846B3D"/>
+                                                                <path d="M24.7881 18.7729V67.935L32.2254 70.3719V20.424L24.7881 18.7729Z" fill="#846B3D"/>
+                                                                <path d="M73.3618 66.1058C73.3618 66.6788 72.9524 66.8748 72.3675 67.1428L66.2369 70.3708C65.4085 70.8008 65.2427 69.9068 65.2427 69.3338V59.4828C65.2427 58.9098 65.6013 58.7748 66.2369 58.4458L72.3675 55.2178C73.6657 54.5268 73.2764 55.9318 73.3618 58.5878V66.1058Z" fill="white"/>
+                                                                <path d="M65.8706 60.4519L71.9552 57.3679V57.7219L65.8706 60.9129V60.4519Z" fill="#4C402C"/>
+                                                                <path d="M65.8706 61.668L71.9552 58.584V58.939L65.8706 62.132V61.668Z" fill="#4C402C"/>
+                                                                <path d="M65.8706 63.0308L71.9552 59.9468V60.3018L65.8706 63.4928V63.0308Z" fill="#4C402C"/>
+                                                                <path d="M66.0134 66.7698L69.8601 64.8198L69.9081 65.1888L66.0144 67.2308L66.0134 66.7698Z" fill="#4C402C"/>
+                                                                <path d="M66.0134 67.6949L69.8601 65.7449L69.9081 66.1139L66.0144 68.1559L66.0134 67.6949Z" fill="#4C402C"/>
+                                                                <path d="M66.0134 68.6319L69.8601 66.6819L69.9081 67.0509L66.0144 69.0929L66.0134 68.6319Z" fill="#4C402C"/>
+                                                            </svg>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <p class="bold normal-text">Customer: <a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a></p>
+                                                                    <p class="bold normal-text">Order: <a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></p>
+                                                                </div>
+                                                                <div class="col-auto">
+                                                                    <div class="col-auto" v-if="!packingList.transport">
+                                                                        <div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5"><i class="fa fa-check m-r-5"></i>Release</div>
+                                                                        <div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <p class="normal-text bold">{{package_item.description}} <span class="muted normal m-l-10">(Quantity: {{package_item.quantity}})</span></p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <p class="large-text">{{packingList.order.address.street_one+' '+(packingList.order.address.street_two ? packingList.order.address.street_two : '')+', '+ packingList.order.address.district.name+', '+packingList.order.address.post_code+' '+packingList.order.address.state.name+', '+packingList.order.address.country.name}}</p>
+                                                                </div>
+                                                                <div class="col-auto">
+                                                                    <p class="small-text bold">{{package_item.length}}x{{package_item.width}}x{{package_item.height}} CM / <span class="text-complete bold fs-20">{{ (Math.ceil((package_item.cbm) * 1000) / 1000).toFixed(3)}}CBM</span></p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <p class="small-text muted">Remark</p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row m-t-20">
+                                                                <div class="col">
+                                                                </div>
+                                                                <div class="col-auto">
+                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Add Remarks</div>
+                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Address</div>
+                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Package</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -297,48 +416,124 @@
                     </div>
                 </div>
             </div>
+                            
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editContainer">
+                <edit-container-form-component :section="section" :data="container"></edit-container-form-component>
+            </modal-component>
+    
             <div class="row m-t-10">
                 <div class="col">
-                    <div class="row">
-                        <div class="col" style="height: 300px;">
-                            <div class="row h-100">
-                                <div class="col">
-                                    <h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
-                                    <div class="row h-100 p-l-10 p-r-10">
-                                        <div class="col rounded bg-master-lighter padding-15">
-                                            Timeline
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="row h-100">
                         <div class="col">
                             <div class="row">
-                                <div class="col">
-                                    <h5 class="m-b-5 large-text bold l-20">Comments:</h5>
-                                    <div class="row p-l-10 p-r-10">
-                                        <div class="col rounded bg-master-lighter padding-15">
-                                            Comments
-                                        </div>
-                                    </div>
+                                <div class="col-auto padding-5 m-l-15 m-r-15" :class="[{'text-primary': tabShowing === 'Timeline'}, {'b-b': tabShowing === 'Timeline'}]"  @click="tabShowing = 'Timeline'">
+                                    <h5 class="large-text bold l-20" :class="[{'text-primary': tabShowing === 'Timeline'}]" >Activity Timeline</h5>
+                                </div>
+                                <div class="col-auto padding-5 m-l-15 m-r-15" :class="[{'text-primary': tabShowing === 'Comments'},  {'b-b': tabShowing === 'Comments'}]" @click="tabShowing = 'Comments'">
+                                    <h5 class="large-text bold l-20" :class="[{'text-primary': tabShowing === 'Comments'}]">Comments</h5>
                                 </div>
                             </div>
-                            <div class="row m-t-15">
-                                <div class="col">
-                                    <div class="row p-l-10 p-r-10">
+                            <div class="row p-l-10 p-r-10">
+                                <div class="col rounded padding-15">
+                                    <div class="row" v-if="tabShowing === 'Timeline'">
                                         <div class="col">
-                                            <h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
-                                        </div>
-                                        <div class="co-auto">
-                                            <div class="btn justify-content bg-master-light">
-                                                <i class="fa fa-upload m-r-10" ></i>Upload Documents    
-                                            </div>
+                                            <ul class="timeline_ul">
+                                                <li class="bg-purple">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p class="no-margin bold">Item Returned</p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <p class="muted no-margin">5 September 2021</p>
+                                                        </div>
+                                                    </div>
+                                                    <p>Item has been returned due to mismatch</p>
+                                                </li>
+                                                <li class="bg-orange">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p class="no-margin bold">Client Report</p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <p class="muted no-margin">21 August 2021</p>
+                                                        </div>
+                                                    </div>
+                                                    <p>Client report order number #012AS12W</p>
+                                                </li>
+                                                <li class="bg-blue">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p class="no-margin bold">Item Cancelled</p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <p class="muted no-margin">8 May 2021</p>
+                                                        </div>
+                                                    </div>
+                                                    <p>Item has been cancelled by clients number #012ASJ21</p>
+                                                </li>
+                                                <li class="bg-blue">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p class="no-margin bold">Item Cancelled</p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <p class="muted no-margin">8 May 2021</p>
+                                                        </div>
+                                                    </div>
+                                                    <p>Item has been cancelled by clients number #012ASJ21</p>
+                                                </li>
+                                                <li class="bg-orange">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p class="no-margin bold">Client Report</p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <p class="muted no-margin">21 August 2021</p>
+                                                        </div>
+                                                    </div>
+                                                    <p>Client report order number #012AS12W</p>
+                                                </li>
+                                            </ul>
                                         </div>
                                     </div>
-                                    <div class="row p-l-10 p-r-10">
-                                        <div class="col rounded bg-master-lighter padding-15">
-                                            documents
-                                        </div>
+                                    <div class="row" v-if="tabShowing === 'Comments'">
+                                        <div class="col">
+                                            <div class="row m-b-20">
+                                                <div class="col">
+                                                    <div class="row justify-content-center align-items-center m-l-5 m-b-15">
+                                                        <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                        <div class="col">
+                                                            <p class="no-margin muted bold fs-20">Jacob Arlington</p>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row m-b-20">
+                                                <div class="col">
+                                                    <div class="row justify-content-center align-items-center m-l-5 m-b-15">
+                                                        <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                        <div class="col">
+                                                            <p class="no-margin muted bold fs-20">Jacob Arlington</p>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
+                                        </div>    
                                     </div>
                                 </div>
                             </div>
@@ -365,11 +560,8 @@ import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
                     isLoading: true,
                     container: null,
                     expanded: false,
-                    totalCBM: 6,
                     CBMcapacity: 30,
-                    svgLenght: 0,
-                    svgLenghtSquare: 0,
-                    confirmLanding: false,
+                    tabShowing: 'Timeline',
                 }
             },
             computed: {
@@ -400,10 +592,6 @@ import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
                     this.isLoading = false;
                     this.container = response.payload.data;
                 },
-                confirmStatus(){
-                    this.confirmLanding = true;
-                    console.log(this.confirmLanding);
-                }
             }
         }
     </script>
\ No newline at end of file