diff --git a/resources/assets/vue/components/common/OrdersSearchComponent.vue b/resources/assets/vue/components/common/OrdersSearchComponent.vue
new file mode 100644
index 0000000..ab82cb7
--- /dev/null
+++ b/resources/assets/vue/components/common/OrdersSearchComponent.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="col">
+        <div class="row">
+            <div class="col p-r-15 p-l-0">
+                <div class="row m-b-10">
+                    <div class="col">
+                        <div class="row p-b-5 p-t-5 bg-white tab-container">
+                            <div class="col text-master">
+                                <div class="row align-items-center justify-content-center">
+                                    <div class="col all-caps fs-12">
+                                        <input type="text" class="form-control no-border" v-model="query" @keyup="search()" placeholder="Order No" id="icon-filter" name="icon-filter">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row m-b-10">
+                    <div class="col">
+                        <div class="row p-b-5 p-t-5 bg-white tab-container">
+                            <div class="col text-master">
+                                <div class="row align-items-center justify-content-center">
+                                    <div class="col all-caps fs-7">
+                                        <date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
+                                    </div>
+                                    <div class="col-1 all-caps">
+                                        <strong>-</strong>
+                                    </div>
+                                    <div class="col all-caps fs-6">
+                                        <date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row m-b-10">
+                    <div class="col">
+                        <div class="row p-b-5 p-t-5 bg-white tab-container">
+                            <div class="col text-master">
+                                <div class="row align-items-center justify-content-center">
+                                    <div class="col all-caps fs-6">
+                                        <select class="form-control no-border muted" v-model="selected">
+                                            <option disabled value="">Search By Status</option>
+                                            <option v-bind:value="{ string: Processing }">Processing</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--<div class="col-auto">-->
+    <!--&lt;!&ndash;<div class="text-success fs-12 bold">Advanced Search</div>&ndash;&gt;-->
+    <!--</div>-->
+    <!--<div class="col-1"></div>-->
+</template>
+<script>
+    export default {
+        props: {
+            'placeholder': {
+                type: String,
+                default: "Search user or group"
+            }
+        },
+        data(){
+            return {
+                query: "",
+                results: [],
+                isActive: false
+            }
+        },
+        methods: {
+            route: route,
+            search(){
+                if(this.query.length > 2 ){
+                    fetch(route('api.company.search') + '?query=' + this.query).then(response => response.json())
+                        .then(response => {
+                            this.results = response.data;
+                            this.isActive = true;
+                        })
+                        .catch(error => console.log(error))
+
+                } else {
+                    this.isActive = false;
+                }
+            },
+            closeSearch(){
+                this.query = '';
+                this.isActive = false;
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/order/lists/SearchOrdersComponent.vue b/resources/assets/vue/components/order/lists/SearchOrdersComponent.vue
new file mode 100644
index 0000000..e69de29