diff --git a/resources/assets/vue/components/orders/sections/OrderSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderSectionComponent.vue
index 88d5362b..61590b82 100644
--- a/resources/assets/vue/components/orders/sections/OrderSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderSectionComponent.vue
@@ -1,6 +1,15 @@
 <template>
     <div class="row tabsContainer">
         <div class="col no-padding">
+            <div class="row">
+                <div class="col">
+                    <!-- <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="activeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, order_by: {column: 'created_at', DESC: false}, status_in: [2], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 30, order_by: {column: 'created_at', DESC: true}, status_in: [2], with_packing_lists: true}" :columns=3>
+                        <template slot="list" slot-scope="{data}">
+                            <order-component :data="data"></order-component>
+                        </template>
+                    </list-component> -->
+                </div>
+            </div>
             <div class="row m-l-0 m-r-0">
                 <div class="col col-md-2 m-r-5">
                     <div class="row justify-content-end">
diff --git a/resources/views/pages/orders/index.blade.php b/resources/views/pages/orders/index.blade.php
index d17bf3e0..3bb3fed0 100644
--- a/resources/views/pages/orders/index.blade.php
+++ b/resources/views/pages/orders/index.blade.php
@@ -1,10 +1,30 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-    <div class="row m-b-20" v-if="$store.getters.isAdmin">
-        <div class="col"></div>
-        <div class="col-auto">
+    <div class="row m-b-20 flex-sm-row flex-column-reverse" v-if="$store.getters.isAdmin">
+        <div class="col-12 col-md">
+            <div class="row mt-3 mt-md-0">
+                <div class="col">
+                    <div class="input-group form-group no-margin form-group-default">
+                        <input class="form-control p-t-10" placeholder="Search Order No.">
+                        <button type="button" class="btn btn-primary" @click="$store.dispatch('toggleSection', {name: 'searchOrderSection', status: true})">
+                            <i class="fa fa-search"></i>
+                        </button>
+                        <button type="button" class="btn btn-default bg-master-light m-l-5" @click="$store.dispatch('toggleSection', {name: 'searchOrderSection', status: false})">
+                            Reset
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-auto text-right">
             <a :href="route('orders.refresh')"><div class="btn btn-sm btn-warning all-caps b-rad-none pointer"><i class="fa fa-refresh m-r-10"></i>Refresh Orders</div></a>
         </div>
     </div>
-    <order-section-component></order-section-component>
+    <order-section-component v-show="!$store.getters.isShowing('searchOrderSection')"></order-section-component>
+
+    <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="activeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, order_by: {column: 'created_at', DESC: false}, status_in: [2], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 6, order_by: {column: 'created_at', DESC: true}, status_in: [2], with_packing_lists: true}" :columns=3 v-show="$store.getters.isShowing('searchOrderSection')">
+        <template slot="list" slot-scope="{data}">
+            <order-component :data="data"></order-component>
+        </template>
+    </list-component>
 @endsection
\ No newline at end of file