diff --git a/templates/search/legacyjo_details.html.twig b/templates/search/legacyjo_details.html.twig
index 2c96b5b5..f43e9e49 100644
--- a/templates/search/legacyjo_details.html.twig
+++ b/templates/search/legacyjo_details.html.twig
@@ -11,217 +11,239 @@
     </div>
     <!-- END: Subheader -->
     <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+                <div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__head">
+                        <div class="m-portlet__head-caption">
+                            <div class="m-portlet__head-title">
+                                <span class="m-portlet__head-icon">
+                                    <i class="flaticon-transport"></i>
+                                </span>
+                                <h3 class="m-portlet__head-text">
+                                    Legacy Job Order 
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!--Begin::Section-->
         <div class="row">
             <form id="row-form" class="m-form m-form--fit m-form--label-align-right">
-                <div class="m-form__section{{ mode == 'details' }}">
-                    <div class="m-form__heading">
-                        <h3 class="m-form__heading-title">
-                            Customer Details
-                        </h3>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="customer_first_name">First Name</label>
-                            <input type="text" name="customer_first_name" id="customer-first-name" class="form-control m-input" value="{{ data.getCustFirstName|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="customer_first_name"></div>
+                <div class="m-portlet__body">
+                    <div class="m-form__section{{ mode == 'details' }}">
+                        <div class="m-form__heading">
+                            <h3 class="m-form__heading-title">
+                                Customer Details
+                            </h3>
                         </div>
-                        <div class="col-lg-6">
-                            <label data-field="customer_last_name">Last Name</label>
-                            <input type="text" name="customer_last_name" id="customer-last-name" class="form-control m-input" value="{{ data.getCustLastName|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="customer_last_name"></div>
-                        </div>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="customer_phone_mobile">Mobile Phone</label>
-                            <div class="input-group m-input-group">
-                                <span class="input-group-addon">+63</span>
-                                <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ data.getCustMobile|default('') }}" data-vehicle-field="1" disabled>
-                                <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="customer_first_name">First Name</label>
+                                <input type="text" name="customer_first_name" id="customer-first-name" class="form-control m-input" value="{{ data.getCustFirstName|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="customer_first_name"></div>
+                            </div>
+                            <div class="col-lg-6">
+                                <label data-field="customer_last_name">Last Name</label>
+                                <input type="text" name="customer_last_name" id="customer-last-name" class="form-control m-input" value="{{ data.getCustLastName|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="customer_last_name"></div>
                             </div>
                         </div>
-                        <div class="col-lg-6">
-                            <label data-field="customer_phone_landline">Landline</label>
-                            <div class="input-group m-input-group">
-                                <span class="input-group-addon">+63</span>
-                                <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ data.getCustLandline|default('') }}" data-vehicle-field="1" disabled>
-                                <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="customer_phone_mobile">Mobile Phone</label>
+                                <div class="input-group m-input-group">
+                                    <span class="input-group-addon">+63</span>
+                                    <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ data.getCustMobile|default('') }}" data-vehicle-field="1" disabled>
+                                    <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
+                                </div>
+                            </div>
+                            <div class="col-lg-6">
+                                <label data-field="customer_phone_landline">Landline</label>
+                                <div class="input-group m-input-group">
+                                    <span class="input-group-addon">+63</span>
+                                    <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ data.getCustLandline|default('') }}" data-vehicle-field="1" disabled>
+                                    <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="customer_contact">Contact</label>
+                                <div class="input-group m-input-group">
+                                    <span class="input-group-addon">+63</span>
+                                    <input type="text" name="customer_contact" id="customer-contact" class="form-control m-input" value="{{ data.getCustContact|default('') }}" data-vehicle-field="1" disabled>
+                                    <div class="form-control-feedback hide" data-field="customer_contact"></div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="customer_contact">Contact</label>
-                            <div class="input-group m-input-group">
-                                <span class="input-group-addon">+63</span>
-                                <input type="text" name="customer_contact" id="customer-contact" class="form-control m-input" value="{{ data.getCustContact|default('') }}" data-vehicle-field="1" disabled>
-                                <div class="form-control-feedback hide" data-field="customer_contact"></div>
+                    <div class="m-form__section">
+                        <div class="m-form__heading">
+                            <h3 class="m-form__heading-title">
+                                Vehicle Details
+                            </h3>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-3">
+                                <label data-field="vmfg">Manufacturer</label>
+                                <input type="text" name="vmfg" id="vmfg" class="form-control m-input" value="{{ data.getCarBrand|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="vmfg"></div>
+                            </div>
+                            <div class="col-lg-3">
+                                <label data-field="vehicle_make">Make</label>
+                                <input type="text" name="vehicle_make" id="vehicle-make" class="form-control m-input" value="{{ data.getCarMake|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="vehicle_make"></div>
+                            </div>
+                            <div class="col-lg-3">
+                                <label data-field="vehicle_year">Model Year</label>
+                                <input type="text" name="vehicle_year" id="vehicle-year" class="form-control m-input" value="{{ data.getCarModel|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="vehicle_year"></div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-3">
+                                <label data-field="vehicle_plate">Plate #</label>
+                                <input type="text" name="vehicle_plate" id="vehicle-plate" class="form-control m-input" value="{{ data.getPlateNumber|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="vehicle_color"></div>
+                            </div>
+                            <div class="col-lg-3">
+                                <label data-field="vehicle_color">Color</label>
+                                <input type="text" name="vehicle_color" id="vehicle-color" class="form-control m-input" value="{{ data.getCarColor|default('') }}" data-vehicle-field="1" disabled>
+                                <div class="form-control-feedback hide" data-field="vehicle_color"></div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="m-form__section">
-                    <div class="m-form__heading">
-                        <h3 class="m-form__heading-title">
-                            Vehicle Details
-                        </h3>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-3">
-                            <label data-field="vmfg">Manufacturer</label>
-                            <input type="text" name="vmfg" id="vmfg" class="form-control m-input" value="{{ data.getCarBrand|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="vmfg"></div>
+                    <div class="m-form__section">
+                        <div class="m-form__heading">
+                            <h3 class="m-form__heading-title">
+                                Transaction Details
+                            </h3>
+                            <span class="m-switch m-switch--icon block-switch">
+                                <label>
+                                    <input type="checkbox" name="flag_advance" id="flag-advance" value="1"{{ data.getAdvanceOrder == "Yes" ? ' checked' }} disabled>
+                                    <label class="switch-label">This is an advance order</label>
+                                    <span></span>
+                                </label>
+                            </span>
                         </div>
-                        <div class="col-lg-3">
-                            <label data-field="vehicle_make">Make</label>
-                            <input type="text" name="vehicle_make" id="vehicle-make" class="form-control m-input" value="{{ data.getCarMake|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="vehicle_make"></div>
+                        <div class="form-group m-form__group row">
+                              <div class="col-lg-6">
+                                  <label data-field="transaction_type">Transaction Type</label>
+                                  <input type="text" name="transaction_type" id="trasaction-type" class="form-control m-input" value="{{ data.getTransType|default('') }}" disabled>
+                                  <div class="form-control-feedback hide" data-field="service_type"></div>
+                              </div>
+                              <div class="col-lg-3">
+                                  <label data-field="mode_of_payment">Mode of Payment</label>
+                                  <input type="text" name="mode_of_payment" id="mode-of-payment" class="form-control m-input" value="{{ data.getPaymentMethod|default('') }}" disabled>
+                                  <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
+                              </div>
                         </div>
-                        <div class="col-lg-3">
-                            <label data-field="vehicle_year">Model Year</label>
-                            <input type="text" name="vehicle_year" id="vehicle-year" class="form-control m-input" value="{{ data.getCarModel|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="vehicle_year"></div>
-                        </div>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-3">
-                            <label data-field="vehicle_plate">Plate #</label>
-                            <input type="text" name="vehicle_plate" id="vehicle-plate" class="form-control m-input" value="{{ data.getPlateNumber|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="vehicle_color"></div>
-                        </div>
-                        <div class="col-lg-3">
-                            <label data-field="vehicle_color">Color</label>
-                            <input type="text" name="vehicle_color" id="vehicle-color" class="form-control m-input" value="{{ data.getCarColor|default('') }}" data-vehicle-field="1" disabled>
-                            <div class="form-control-feedback hide" data-field="vehicle_color"></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="m-form__section">
-                    <div class="m-form__heading">
-                        <h3 class="m-form__heading-title">
-                            Transaction Details
-                        </h3>
-                        <span class="m-switch m-switch--icon block-switch">
-                            <label>
-                                <input type="checkbox" name="flag_advance" id="flag-advance" value="1"{{ data.getAdvanceOrder == "Yes" ? ' checked' }} disabled>
-                                <label class="switch-label">This is an advance order</label>
-                                <span></span>
-                            </label>
-                        </span>
-                    </div>
-                    <div class="form-group m-form__group row">
-                          <div class="col-lg-6">
-                              <label data-field="transaction_type">Transaction Type</label>
-                              <input type="text" name="transaction_type" id="trasaction-type" class="form-control m-input" value="{{ data.getTransType|default('') }}" disabled>
-                              <div class="form-control-feedback hide" data-field="service_type"></div>
-                          </div>
-                          <div class="col-lg-3">
-                              <label data-field="mode_of_payment">Mode of Payment</label>
-                              <input type="text" name="mode_of_payment" id="mode-of-payment" class="form-control m-input" value="{{ data.getPaymentMethod|default('') }}" disabled>
-                              <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
-                          </div>
-                    </div>
-                    <div class="form-group m-form__group row">
-                          <div class="col-lg-6">
-                              <label>Transaction Date</label>
-                              <input type="text" name="date_transaction" class="form-control m-input" value="{{ data.getTransDate|default("now")|date('d M Y - g:i A') }}" disabled>
-                              <div class="form-control-feedback hide" data-field="date_transaction"></div>
-                          </div>
-                        <div class="col-lg-3">
-                            <label data-field="date_schedule">Delivery Date</label>
-                            <div class="input-group date dp">
-                                <input type="text" name="date_delivery_date" class="form-control m-input" value="{{ data.getDeliveryDate|default('') }}" readonly placeholder="Select a date" disabled>
-                                <span class="input-group-addon">
-                                    <i class="la la-calendar glyphicon-th"></i>
-                                </span>
+                        <div class="form-group m-form__group row">
+                              <div class="col-lg-6">
+                                  <label>Transaction Date</label>
+                                  <input type="text" name="date_transaction" class="form-control m-input" value="{{ data.getTransDate|default("now")|date('d M Y - g:i A') }}" disabled>
+                                  <div class="form-control-feedback hide" data-field="date_transaction"></div>
+                              </div>
+                            <div class="col-lg-3">
+                                <label data-field="date_schedule">Delivery Date</label>
+                                <div class="input-group date dp">
+                                    <input type="text" name="date_delivery_date" class="form-control m-input" value="{{ data.getDeliveryDate|default('') }}" readonly placeholder="Select a date" disabled>
+                                    <span class="input-group-addon">
+                                        <i class="la la-calendar glyphicon-th"></i>
+                                    </span>
+                                </div>
+                                <div class="form-control-feedback hide" data-field="date_delivery_date"></div>
                             </div>
-                            <div class="form-control-feedback hide" data-field="date_delivery_date"></div>
-                        </div>
-                        <div class="col-lg-3">
-                            <label data-field="date_schedule">Delivery Time</label>
-                            <div class="input-group">
-                                <input type="text" name="date_delivery_time" class="form-control m-input tp" value="{{ data.getDeliveryTime|default('') }}" readonly placeholder="Select a time" disabled>
-                                <span class="input-group-addon">
-                                    <i class="la la-clock-o glyphicon-th"></i>
-                                </span>
-                            </div>
-                            <div class="form-control-feedback hide" data-field="date_delivery_time"></div>
-                        </div>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="agent_notes">Agent Notes</label>
-                            <textarea name="agent_notes" class="form-control m-input" rows="15" disabled>{{ data.getAgentNotes1 }}</textarea>
-                            <div class="form-control-feedback hide" data-field="agent_notes"></div>
-                        </div>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <div class="col-lg-12 form-group-inner">
-                                <label data-field="source">Transaction Origin</label>
-                                <input type="text" name="transaction_origin" id="trasaction-origin" class="form-control m-input" value="{{ data.getOrigin|default('') }}" disabled>
-                                <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
-                            </div>
-                            <br>
-                            <div class="col-lg-12 form-group-inner">
-                                <label data-field="delivery_instructions">Delivery Instructions</label>
-                                <textarea name="delivery_instructions" class="form-control m-input" rows="4" disabled>{{ data.getDeliveryInstructions }}</textarea>
-                            </div> 
-                        </div>
-                        <div class="col-lg-6">
-                            <div class="col-lg-12 form-group-inner">
-                                <label>Prepared By</label>
-                                <input type="text" name="prepared_by" class="form-control m-input" value="{{ obj.getPreparedBy|default('') }}" disabled>
-                                <div class="form-control-feedback hide" data-field="date_transaction"></div>
-                            </div>
-                            <br>
-                            <div class="col-lg-12 form-group-inner">
-                                <label>Dispatched By</label>
-                                <input type="text" name="dispatched_by" class="form-control m-input" value="{{ data.getDispatchedBy|default('') }}" disabled>
-                                <div class="form-control-feedback hide" data-field="date_transaction"></div>
+                            <div class="col-lg-3">
+                                <label data-field="date_schedule">Delivery Time</label>
+                                <div class="input-group">
+                                    <input type="text" name="date_delivery_time" class="form-control m-input tp" value="{{ data.getDeliveryTime|default('') }}" readonly placeholder="Select a time" disabled>
+                                    <span class="input-group-addon">
+                                        <i class="la la-clock-o glyphicon-th"></i>
+                                    </span>
+                                </div>
+                                <div class="form-control-feedback hide" data-field="date_delivery_time"></div>
                             </div>
                         </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="agent_notes">Agent Notes</label>
+                                <textarea name="agent_notes" class="form-control m-input" rows="15" disabled>{{ data.getAgentNotes1 }}</textarea>
+                                <div class="form-control-feedback hide" data-field="agent_notes"></div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <div class="col-lg-12 form-group-inner">
+                                    <label data-field="source">Transaction Origin</label>
+                                    <input type="text" name="transaction_origin" id="trasaction-origin" class="form-control m-input" value="{{ data.getOrigin|default('') }}" disabled>
+                                    <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
+                                </div>
+                                <br>
+                                <div class="col-lg-12 form-group-inner">
+                                    <label data-field="delivery_instructions">Delivery Instructions</label>
+                                    <textarea name="delivery_instructions" class="form-control m-input" rows="4" disabled>{{ data.getDeliveryInstructions }}</textarea>
+                                </div> 
+                            </div>
+                            <div class="col-lg-6">
+                                <div class="col-lg-12 form-group-inner">
+                                    <label>Prepared By</label>
+                                    <input type="text" name="prepared_by" class="form-control m-input" value="{{ obj.getPreparedBy|default('') }}" disabled>
+                                    <div class="form-control-feedback hide" data-field="date_transaction"></div>
+                                </div>
+                                <br>
+                                <div class="col-lg-12 form-group-inner">
+                                    <label>Dispatched By</label>
+                                    <input type="text" name="dispatched_by" class="form-control m-input" value="{{ data.getDispatchedBy|default('') }}" disabled>
+                                    <div class="form-control-feedback hide" data-field="date_transaction"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="stage">Status</label>
+                                <input type="text" name="stage" class="form-control m-input" value="{{ data.getStage|default('') }}" disabled>
+                                <div class="form-control-feedback hide" data-field="stage"></div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="cancel_reason">Reason for Cancellation</label>
+                                <textarea name="cancel_reason" class="form-control m-input" rows="4" disabled>{{ data.getCancelReason|default('') }}</textarea>
+                                <div class="form-control-feedback hide" data-field="cancel_reason"></div>
+                            </div>
+                            <div class="col-lg-6">
+                                <label data-field="cancel_reason_specify">Details for Cancellation</label>
+                                <textarea name="cancel_reason_specify" class="form-control m-input" rows="4" disabled>{{ data.getCancelReasonSpecify|default('') }}</textarea>
+                                <div class="form-control-feedback hide" data-field="cancel_reason_specify"></div>
+                            </div>
+                       </div>
                     </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="stage">Status</label>
-                            <input type="text" name="stage" class="form-control m-input" value="{{ data.getStage|default('') }}" disabled>
-                            <div class="form-control-feedback hide" data-field="stage"></div>
+                    <div class="m-form__seperator m-form__seperator--dashed"></div>
+                    <div class="m-form__section">
+                        <div class="m-form__heading">
+                            <h3 class="m-form__heading-title">
+                                Location
+                            </h3>
                         </div>
+                        <div class="form-group m-form__group row">
+                            <div class="col-lg-6">
+                                <label data-field="delivery_address">Delivery Address</label>
+                                <textarea name="delivery_address" class="form-control m-input" rows="4" disabled>{{ data.getDeliveryAddress|default('') }}</textarea>
+                                <div class="form-control-feedback hide" data-field="delivery_address"></div>
+                            </div>
+                            <div class="col-lg-6">
+                                <label data-field="landmark">Landmark</label>
+                                <textarea name="landmark" class="form-control m-input" rows="4" disabled>{{ data.getLandmark|default('') }}</textarea>
+                                <div class="form-control-feedback hide" data-field="landmark"></div>
+                            </div>
+                       </div>
                     </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="cancel_reason">Reason for Cancellation</label>
-                            <textarea name="cancel_reason" class="form-control m-input" rows="4" disabled>{{ data.getCancelReason|default('') }}</textarea>
-                            <div class="form-control-feedback hide" data-field="cancel_reason"></div>
-                        </div>
-                        <div class="col-lg-6">
-                            <label data-field="cancel_reason_specify">Details for Cancellation</label>
-                            <textarea name="cancel_reason_specify" class="form-control m-input" rows="4" disabled>{{ data.getCancelReasonSpecify|default('') }}</textarea>
-                            <div class="form-control-feedback hide" data-field="cancel_reason_specify"></div>
-                        </div>
-                   </div>
-                </div>
-                <div class="m-form__seperator m-form__seperator--dashed"></div>
-                <div class="m-form__section">
-                    <div class="m-form__heading">
-                        <h3 class="m-form__heading-title">
-                            Location
-                        </h3>
-                    </div>
-                    <div class="form-group m-form__group row">
-                        <div class="col-lg-6">
-                            <label data-field="delivery_address">Delivery Address</label>
-                            <textarea name="delivery_address" class="form-control m-input" rows="4" disabled>{{ data.getDeliveryAddress|default('') }}</textarea>
-                            <div class="form-control-feedback hide" data-field="delivery_address"></div>
-                        </div>
-                        <div class="col-lg-6">
-                            <label data-field="landmark">Landmark</label>
-                            <textarea name="landmark" class="form-control m-input" rows="4" disabled>{{ data.getLandmark|default('') }}</textarea>
-                            <div class="form-control-feedback hide" data-field="landmark"></div>
-                        </div>
-                   </div>
                 </div>
             </form>
         </div>