diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss
index dbc80e6f..a22dc2fc 100644
--- a/resources/assets/sass/modules/_typography.scss
+++ b/resources/assets/sass/modules/_typography.scss
@@ -643,6 +643,10 @@ hr{
     cursor: pointer !important;
 }
 
+.not-allowed {
+    cursor: not-allowed !important;
+}
+
 /* Labels
 ------------------------------------
 */
diff --git a/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
new file mode 100644
index 00000000..0175534f
--- /dev/null
+++ b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
@@ -0,0 +1,290 @@
+<template>
+    <div class="row">
+        <div class="col no-margin">
+            <div class="row m-b-15">
+                <div class="col-sm-4">
+                    <label>Order No:</label>
+                    <input type="text" class="form-control form-input" placeholder="12345678" v-model="filters.reference_like">
+                </div>
+                <div class="col-sm-4">
+                    <label>Order Status:</label>
+                    <div class="col">
+                        <div class="row m-b-5 m-r-10">
+                            <div class="col p-l-0 p-r-0">
+                                <div class="btn btn-xs b-grey btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="orderStatusFilterDropDownStatus = !orderStatusFilterDropDownStatus">
+                                    <div class="row">
+                                        <div class="col p-t-5 p-b-5 fs-11">
+                                            {{orderStatus}}
+                                        </div>
+                                        <div class="col-auto b-l b-success">
+                                            <div class="row h-100 align-items-center">
+                                                <div class="col">
+                                                    <i class="fa" :class="[{'fa-angle-down': !orderStatusFilterDropDownStatus}, {'fa-angle-up': orderStatusFilterDropDownStatus}]"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="relative w-100">
+                                    <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !orderStatusFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                        <div class="row text-left no-margin bg-white">
+                                            <div class="col no-padding">
+                                                <div class="row no-margin" v-for="status in orderStatusFilterArray">
+                                                    <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': orderStatus === status}, {'text-white': orderStatus === status}, {'hover-primary': orderStatus !== status}, {'pointer': orderStatus !== status}]" @click="updateOrderStatusFilter(status)">
+                                                        <div class="row align-items-center justify-content-center">
+                                                            <div class="col">
+                                                                <div class="font-heading fs-11">{{status}}</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-15">
+                        <div class="col-auto p-r-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="updateFilters(filters)">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5">Search</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-search fs-16"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                        <div class="col-auto p-l-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-secondary b-rad-none bg-secondary" @click="resetFilter()">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5 text-white">Reset</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-refresh fs-16 text-white"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <table class="display w-100 m-b-10">
+                                                <thead>
+                                                    <tr>
+                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'reference'}]" @click="updateOrderBy('reference')">Order No <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'reference' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'reference' && filters.order_by.DESC == true}]"></i></th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Warehouse</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Delivery Address</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Marking</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'created_at'}]" @click="updateOrderBy('created_at')">Date <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'created_at' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'created_at' && filters.order_by.DESC == true}]"></i></th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Total CBM</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed"></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr v-for="data in $store.getters.getListData(section)">
+                                                        <td class="padding-10 b-a b-grey">{{data.reference}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{data.warehouse.name}} {{$store.getters.isAdmin ? data.warehouse.reference : ''}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{data.address.reference}} <i class="fa fa-info-circle float-right" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+data.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+data.address.street_one+' '+(data.address.street_two ? data.address.street_two : '')+', '+ data.address.district.name+', '+data.address.post_code+' '+data.address.state.name+', '+data.address.country.name+'</p>'" ></i></td>
+                                                        <td class="padding-10 b-a b-grey"><a :href="route('customer.profile', data.company_module.marking)">{{data.company_module.marking}}</a></td>
+                                                        <td class="padding-10 b-a b-grey">{{data.created_at}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{(Math.ceil((data.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</td>
+                                                            <td class="padding-10 b-a b-grey"><a :href="route('order.show', data.reference)"><i class="fa fa-eye pointer"></i></a></td>
+                                                    </tr>
+                                                    <tr v-show="metaData.total === 0">
+                                                        <td class="b-a b-grey" colspan="7">
+                                                            <div class="row align-items-center justify-content-center p-t-50 p-b-50">
+                                                                <div class="col-10">
+                                                                    <div class="row align-items-center justify-content-center  hint-text">
+                                                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                                                                    </div>
+                                                                    <div class="row text-center">
+                                                                        <div class="col">
+                                                                            <div class="row m-t-20">
+                                                                                <div class="col">
+                                                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="row m-t-5 align-items-center justify-content-center hide">
+                                                                                <div class="col">
+                                                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col d-flex justify-content-center flex-column">
+                                            <span>Showing {{metaData.from}} to {{metaData.to}} of {{metaData.total}} entries</span>
+                                        </div>
+                                        <div class="col d-flex justify-content-end align-items-center">
+                                            <div class="m-r-10">Show</div>
+                                            <div class="row m-b-5 m-r-10">
+                                                <div class="col p-r-0">
+                                                    <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="perPageFilterDropDownStatus = !perPageFilterDropDownStatus">
+                                                        <div class="row">
+                                                            <div class="col p-t-5 p-b-5 fs-9">
+                                                                {{filters.per_page}}
+                                                            </div>
+                                                            <div class="col-auto b-l b-success">
+                                                                <div class="row h-100 align-items-center">
+                                                                    <div class="col">
+                                                                        <i class="fa" :class="[{'fa-angle-down': !perPageFilterDropDownStatus}, {'fa-angle-up': perPageFilterDropDownStatus}]"></i>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="relative w-100">
+                                                        <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !perPageFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                                            <div class="row text-left no-margin bg-white">
+                                                                <div class="col no-padding">
+                                                                    <div class="row no-margin" v-for="num in pageFilterArray">
+                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': filters.per_page === num}, {'text-white': filters.per_page === num}, {'hover-primary': filters.per_page !== num}, {'pointer': filters.per_page !== num}]" @click="updatePerPageFilter(num)">
+                                                                            <div class="row align-items-center justify-content-center">
+                                                                                <div class="col">
+                                                                                    <div class="font-heading">{{num}}</div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>entries</div> 
+                                        </div>
+                                        <div class="col-auto" v-show="filters.per_page < metaData.total">
+                                            <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                section: 'ListOrderTableSection',
+                emptyListSection: false,
+                pageFilterArray: [2, 5, 10, 20, 50],
+                perPageFilterDropDownStatus: false,
+                orderStatus: 'Active',
+                orderStatusFilterArray: ['Active', 'Complete', 'Pending Verification', 'Cancelled'],
+                orderStatusFilterDropDownStatus: false,
+                filters: {
+                    per_page: 2, 
+                    status_in: [1], 
+                    with_packing_lists: true,
+                    reference_like: '',
+                    order_by: {
+                        column: 'id',
+                        DESC: false,
+                    },
+                },
+                metaData: {
+                    from: null,
+                    to: null,
+                    total: null,
+                    current_page: null,
+                },
+            }
+        },
+        created(){
+            this.setDecoratorDefault();
+            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
+        },
+        computed: {
+            pendingList () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            }
+        },
+        watch: {
+            pendingList(inComplete){
+                if(inComplete){
+                    this.fetchList();
+                }
+            }
+        },
+        methods: {
+            fetchList(){
+                let listDecorators = this.$store.getters.getListDetails(this.section);
+                this.submit(this.route('api.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
+            },
+            updateOrderBy(field) {
+                field == this.filters.order_by.column ? this.filters.order_by.DESC = !this.filters.order_by.DESC  : '';
+                this.filters.order_by.column = field;
+                this.updateFilters(this.filters);
+            },
+            updateOrderStatusFilter(status) {
+                this.orderStatusFilterDropDownStatus = false;
+                this.orderStatus = status;
+
+                switch(status) {
+                    case 'Active':
+                        this.filters.status_in = [2];
+                        break;
+
+                    case 'Complete':
+                        this.filters.status_in = [3];
+                        break;
+
+                    case 'Pending Verification':
+                        this.filters.status_in = [1];
+                        break;
+                        
+                    case 'Cancelled':
+                        this.filters.status_in = [4, 5, 6];
+                        break;
+                }
+
+                this.updateFilters(this.filters);
+            },
+            updatePerPageFilter(number) {
+                this.perPageFilterDropDownStatus = false;
+                this.filters.per_page = parseInt(number);
+                this.updateFilters(this.filters);
+            },
+            updateFilters(filters){
+                this.filters = filters;
+                this.setDecoratorDefault();
+                this.submit(route('api.order.list') + '?page=' + this.metaData.current_page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
+                this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
+                this.metaData = response.payload.meta;
+            },
+            resetFilter() {
+                this.filters.order_by.column = 'id';
+                this.filters.order_by.DESC = false;
+                this.filters.reference_like = '';
+                this.updateFilters(this.filters);
+            },
+        }
+    }
+</script>
diff --git a/resources/views/emails/layout/base.blade.php b/resources/views/emails/layout/base.blade.php
index 0f58c396..ec9a6f85 100644
--- a/resources/views/emails/layout/base.blade.php
+++ b/resources/views/emails/layout/base.blade.php
@@ -82,6 +82,9 @@
         .pointer {
             cursor: pointer;
         }
+        .not-allowed {
+            cursor: not-allowed;
+        }
         .text-complete {
             color: #009add;
         }
diff --git a/resources/views/pages/orders/table.blade.php b/resources/views/pages/orders/table.blade.php
new file mode 100644
index 00000000..9f42cef6
--- /dev/null
+++ b/resources/views/pages/orders/table.blade.php
@@ -0,0 +1,13 @@
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
+
+@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">--}}
+            {{--<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-search-section-component v-show="!$store.getters.isShowing('createOrderForm')"></order-search-section-component>--}}
+    <orders-table-section-component></orders-table-section-component>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f01fc716..2f5f245c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -63,6 +63,10 @@ Route::get('/orders', function () {
     return view('pages.orders.index');
 })->name('orders');
 
+Route::get('/orders-table', function () {
+    return view('pages.orders.table');
+})->name('ordersTable');
+
 Route::get('/order/show/{order_number}', function ($orderNumber) {
     return view('pages.orders.profile', ['id' => $orderNumber]);
 })->name('order.show');