diff --git a/package.json b/package.json
index ea1b12a3..ced333fa 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "animate.css": "^4.1.1",
         "bootstrap": "^4.0.0",
         "bootstrap-datepicker": "^1.7.1",
+        "chart.js": "^2.9.4",
         "dropzone": "^5.7.2",
         "epic-spinners": "^1.1.0",
         "flag-icon-css": "^3.5.0",
diff --git a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
new file mode 100644
index 00000000..3fc57ff1
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="row align-items-center m-b-10 parentContainer">
+        <div class="container p-0 m-0" @click="backToCompanyList()">
+            <i class="fa fa-arrow-left fs-11 align-middle"></i>
+            <span class="fs-11 m-0 align-middle pl-2 text-uppercase">Back to list</span>
+        </div>
+        <div class="row w-100 m-0 p-0">
+            <div class="col-auto p-0 pt-2 m-b-10" :style="minWidth">
+                <div class="h5 m-0">{{this.company_details.name ? this.company_details.name : ""}}</div>
+            </div>
+            <div class="col-12 p-0">
+                <label class="muted" :style="minWidth">Reference</label>
+                <label>{{this.company_details.reference ? this.company_details.reference : ""}}</label>
+            </div>
+            <div class="col-12 p-0">
+                <label class="muted" :style="minWidth">Business Type</label>
+                <label>{{this.company_details.business_type ? getBusinessTypeDesc(this.company_details.business_type) : ""}}</label>
+            </div>
+            <div class="col-12 p-0">
+                <label class="muted" :style="minWidth">Contacts</label>
+                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? this.company_details.contact.email : ""}}</label>
+            </div>
+            <div class="col-12 p-0">
+                <label class="muted" :style="minWidth">&nbsp;</label>
+                <label><i class="fa fa-phone text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? this.company_details.contact.phone : ""}}</label>
+            </div>
+            <div class="col-12 p-0">
+                <label class="muted" :style="minWidth">Total Booking</label>
+                <label>{{this.company_details.bookings ? this.company_details.bookings.length : ""}}</label>
+            </div>
+            <div class="col-12 p-0">
+                <canvas id="booking-chart"></canvas>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import Chart from 'chart.js';
+
+    export default {
+        props:{
+            company_details:{
+                type:Object,
+                required:true
+            },
+        },
+        data(){
+            return {
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
+            }
+        },
+        watch: {
+            company_details: function(newVal, oldVal) {
+                if(newVal !== null) {
+
+                    let approved  = 0, completed  = 0, rejected  = 0, expired  = 0, pending = 0;
+                    this.company_details.bookings.forEach(function (booking) {
+                        if (booking) {
+                            switch (booking.status) {
+                                case 1:
+                                    pending += 1;
+                                    break;
+                                case 2:
+                                    approved += 1;
+                                    break;
+                                case 3:
+                                    completed += 1;
+                                    break;
+                                case 4:
+                                    rejected += 1;
+                                    break;
+                                case 6:
+                                    expired += 1;
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    });
+
+                    const ctx = document.getElementById('booking-chart');
+                    new Chart(ctx,  {
+                        type: "pie",
+                            data: {
+                            labels: ['Completed','Approved','Rejected','Pending Verification','Expired'],
+                                datasets: [
+                                {
+                                    label: 'Booking Summary',
+                                    data: [completed,approved,rejected,pending,expired],
+                                    backgroundColor: [
+                                        '#4bc0c0',
+                                        '#35a2eb',
+                                        '#ff6384',
+                                        '#ff9f40',
+                                        '#ffcd56'
+                                    ],
+                                }
+                            ]
+                        },
+                        options: {
+                            responsive: true,
+                                plugins: {
+                                legend: {
+                                    position: 'bottom',
+                                },
+                                title: {
+                                    display: true,
+                                        text: 'Booking Activity'
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        },
+        methods: {
+            backToCompanyList() {
+                this.$root.$emit('backToCompanyList');
+            },
+            getBusinessTypeDesc(type){
+                return (type==1) ? 'Company Account':'Personal Account';
+            },
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/elements/CompanyListComponent.vue b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
new file mode 100644
index 00000000..152dbecc
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="row align-items-center m-b-10 parentContainer">
+        <div class="row w-100 m-0 p-0 ">
+            <div class="col-8 pull-left mt-2 pr-0">
+                <div class="font-heading all-caps fs-11">{{this.item.name}}</div>
+            </div>
+            <div class="col-2 text-center mt-2">
+                <div class="font-heading all-caps fs-11">{{this.item.bookings.length}}</div>
+            </div>
+            <div class="col-2 text-right pull-right">
+               <button type="button" @click="viewCompany()" class="btn btn-xs btn-primary fs-11">View</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
+            }
+        },
+        methods: {
+            viewCompany() {
+                this.$root.$emit('viewCompany', this.item);
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
new file mode 100644
index 00000000..c5d778fe
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="col-12">
+        <div class="b-b b-dashed b-grey p-b-25" v-show="!this.show_details">
+            <div class="row align-items-center m-b-5 parentContainer">
+
+                   <div class="col-8">
+                        <div class="font-heading fs-10 muted all-caps">Company</div>
+                    </div>
+                    <div class="col-2 text-center">
+                        <div class="font-heading fs-10 muted all-caps">Booking</div>
+                    </div>
+                    <div class="col-2 text-right pull-right">
+                        <div class="font-heading fs-10 muted all-caps">Action</div>
+                    </div>
+
+            </div>
+            <list-component  key="2" :section="this.section" :endpoint="route('api.company.list')" :options="{per_page: 25,with_bookings:true}">
+                <template slot="list" slot-scope="{data}">
+                    <company-list-component :data="data"></company-list-component>
+                </template>
+            </list-component>
+        </div>
+        <company-details-component  v-show="this.show_details" :company_details="company_details"></company-details-component>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                section: 'companyQuickViewSection',
+                show_details: false,
+                company_details: {},
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
+            }
+        },
+        mounted() {
+            this.$root.$on('backToCompanyList', () => {
+                this.show_details=false;
+                this.$store.dispatch('reloadList', {'name': this.section});
+            });
+            this.$root.$on('viewCompany', (company_details) => {
+                this.show_details=true;
+                this.company_details=company_details;
+            });
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/settings.blade.php b/resources/views/pages/settings.blade.php
index 9976e62c..3eb33179 100644
--- a/resources/views/pages/settings.blade.php
+++ b/resources/views/pages/settings.blade.php
@@ -461,7 +461,7 @@
                                         <div class="row justify-content-end">
                                             <div class="col">
                                                 <div class="row fs-12 text-center">
-                                                    <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="payments">
+                                                    <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="customer-list">
                                                         <div class="row justify-content-center m-b-5">
                                                             <div class="col-auto">
                                                                 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -484,7 +484,7 @@
                                         <div class="row justify-content-end">
                                             <div class="col">
                                                 <div class="row fs-12 text-center">
-                                                    <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="transactions">
+                                                    <div class="col p-t-20 p-b-20 bg-master-lighter tabButton " tab-name="transactions">
                                                         <div class="row justify-content-center m-b-5">
                                                             <div class="col-auto">
                                                                 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -506,9 +506,8 @@
                                 </div>
                                 <div class="row no-margin">
                                     <div class="col bg-white padding-25">
-                                        <div class="row tabsContainer tabContent" tab-name="transfers">
-                                            <div class="col no-padding">
-                                            </div>
+                                        <div class="row tabsContainer tabContent" tab-name="customer-list">
+                                            <company-quick-view-section-component></company-quick-view-section-component>
                                         </div>
                                         <div class="row tabsContainer hide tabContent" tab-name="PO">
                                             <div class="col">
@@ -533,4 +532,11 @@
         </div>
     </div>
 </div>
-@endsection
\ No newline at end of file
+@endsection
+<script>
+    import CompanyQuickViewSectionComponent
+        from "../../assets/vue/components/companies/sections/CompanyQuickViewSectionComponent";
+    export default {
+        components: {CompanyQuickViewSectionComponent}
+    }
+</script>
\ No newline at end of file