diff --git a/app/Classes/General/Eloquent/Filters/Frequency.php b/app/Classes/General/Eloquent/Filters/Frequency.php
new file mode 100644
index 00000000..3eb74340
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/Frequency.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class Frequency implements Filter
+{
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereHas('bookings', function ($query){}, '>=', $value);
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/Monetary.php b/app/Classes/General/Eloquent/Filters/Monetary.php
new file mode 100644
index 00000000..5c91b248
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/Monetary.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class Monetary implements Filter
+{
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereHas('transactions', function ($query) use ($value){
+    		$query->where('transactions.type', TransactionType::PAYMENT)->whereIn('transactions.status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
+    		$query->havingRaw('SUM(amount) >= ' . $value);
+        });
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/Recency.php b/app/Classes/General/Eloquent/Filters/Recency.php
new file mode 100644
index 00000000..75e9ea34
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/Recency.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class Recency implements Filter
+{
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->where('transactions.created_at', '>=', $value);
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/WithTotalPayments.php b/app/Classes/General/Eloquent/Filters/WithTotalPayments.php
index 9721f8d7..015221fd 100644
--- a/app/Classes/General/Eloquent/Filters/WithTotalPayments.php
+++ b/app/Classes/General/Eloquent/Filters/WithTotalPayments.php
@@ -19,8 +19,18 @@ class WithTotalPayments implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->leftJoin('bookings', 'companies.id', '=', 'bookings.company_id')->rightJoin('transactions', function ($join) {
-            $join->on('bookings.id', '=', 'transactions.owner_id')->where('owner_type', '=', Booking::class)->where('transactions.type', TransactionType::PAYMENT)->whereIn('transactions.status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
-        })->addSelect(['companies.*', DB::raw('SUM(transactions.amount) as total_payments'), DB::raw('SUM(transactions.amount / DATEDIFF(companies.created_at, CURRENT_DATE)) as spending_average_per_day'), DB::raw('SUM(transactions.amount) / count(distinct bookings.id) as spending_average_booking')])->groupBy(['companies.id']);
+        return $builder->leftJoin('bookings', 'companies.id', '=', 'bookings.company_id')
+            ->rightJoin('transactions', function ($join) {
+                $join->on('bookings.id', '=', 'transactions.owner_id')
+                ->where('owner_type', '=', Booking::class)
+                ->where('transactions.type', TransactionType::PAYMENT)
+                ->whereIn('transactions.status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
+        })->addSelect([
+            'companies.*', 
+            DB::raw('SUM(transactions.amount) as total_payments'), 
+            DB::raw('SUM(transactions.amount / DATEDIFF(companies.created_at, CURRENT_DATE)) as spending_average_per_day'), 
+            DB::raw('SUM(transactions.amount) / count(distinct bookings.id) as spending_average_booking')
+        ])
+            ->groupBy(['companies.id']);
     }
 }
\ No newline at end of file
diff --git a/app/Classes/Modules/Companies/ControllersLogic/ListCompaniesLogic.php b/app/Classes/Modules/Companies/ControllersLogic/ListCompaniesLogic.php
index 80b15c1c..8e19c737 100644
--- a/app/Classes/Modules/Companies/ControllersLogic/ListCompaniesLogic.php
+++ b/app/Classes/Modules/Companies/ControllersLogic/ListCompaniesLogic.php
@@ -53,9 +53,12 @@ class ListCompaniesLogic extends AbstractControllerLogic
     {
         $this->canListCompanies->passes();
 
+        // dd($request->input('filters'));
+        // frequency = active bookings
+        // monetary = total spending/payment
         $query = $this->listsCompanies->execute($this->listsCompanies->deserializeFilters($request->input('filters')));
+
+        // dd($query);
         return $this->collectionResponse(CompanyResource::collection($query));
-
     }
-
 }
\ No newline at end of file
diff --git a/app/Http/Resources/CompanyResource.php b/app/Http/Resources/CompanyResource.php
index ee1b96a0..80ae4a57 100644
--- a/app/Http/Resources/CompanyResource.php
+++ b/app/Http/Resources/CompanyResource.php
@@ -28,6 +28,7 @@ class CompanyResource extends JsonResource
     {
         $lastPayment = $this->transactions()->where('transactions.type', TransactionType::PAYMENT)->whereIn('transactions.status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED])->orderBy('id', 'DESC')->first();
         $totalPayments =  $this->transactions()->where('transactions.type', TransactionType::PAYMENT)->whereIn('transactions.status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED])->sum('amount');
+
         return [
             'id' => $this->id,
             'name' => $this->name,
diff --git a/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
new file mode 100644
index 00000000..be864c9a
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row m-b-20">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
+                        <div class="col-12 col-md mb-2 mb-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.recency">
+                                <label class="all-caps">Last Payment Date</label>
+                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.recency"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 col-md mb-2 mb-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.frequency">
+                                <label class="all-caps">Bookings Frequency</label>
+                                <input type="text" class="form-control" v-model.lazy="parameters.frequency">
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 col-md mb-2 mb-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.monetary">
+                                <label class="all-caps">Total Payments</label>
+                                <input type="text" class="form-control" v-model.lazy="parameters.monetary">
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
+                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Search</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row no-margin" v-show="search">
+                <div class="col bg-white padding-25">
+                    <list-component :section="section" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'recency': recency, 'frequency': frequency, 'monetary': monetary, 'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
+                        <template slot="list" slot-scope="{data}">
+                            <company-component :data="data"></company-component>
+                        </template>
+                    </list-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+import { required, minValue} from "vuelidate/lib/validators";
+import {VMoney} from 'v-money'
+
+export default {
+    data(){
+        return {
+            section: 'customerSectionComponent',
+            isLoading: false,
+            search: false,
+            parameters: {
+                recency: '2022-02-15',
+                frequency: 0,
+                monetary : 0,
+            }
+        }
+    },
+    methods: {
+        submitSearch(){
+            this.search = true;
+        }
+    },
+    validations: {
+        parameters: {
+            recency: {}, 
+            frequency: {}, 
+            monetary: {}, 
+        }
+    },
+    mixins: [componentHandler]
+};
+</script>
diff --git a/resources/assets/vue/components/general/forms/DatePickerComponent.vue b/resources/assets/vue/components/general/forms/DatePickerComponent.vue
new file mode 100644
index 00000000..571227ef
--- /dev/null
+++ b/resources/assets/vue/components/general/forms/DatePickerComponent.vue
@@ -0,0 +1,28 @@
+<template>
+    <input class="form-control">
+</template>
+
+<script>
+    export default {
+        props: {
+            value: {
+                required: false
+            }
+        },
+        mounted(){
+            let vm = this;
+            $(this.$el).datepicker({
+                format: 'dd-mm-yyyy',
+                autoclose: true,
+                clearBtn: true,
+            }).val(this.value).trigger("change").on('changeDate', function(){
+                vm.$emit('input', this.value);
+            });
+        },
+        watch: {
+            value: function(value){
+                $(this.$el).val(value).trigger('change');
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/customers/index.blade.php b/resources/views/pages/customers/index.blade.php
index c5807fd5..25099bc7 100644
--- a/resources/views/pages/customers/index.blade.php
+++ b/resources/views/pages/customers/index.blade.php
@@ -4,6 +4,7 @@
         <div class="col p-t-15 p-b-15">
             <div class="row m-b-25">
                 <div class="col">
+                    <customer-section-component></customer-section-component>
                     <div class="row tabsContainer">
                         <div class="col">
                             <div class="row m-l-0 m-r-0 d-flex">
@@ -76,14 +77,18 @@
                             <div class="row no-margin">
                                 <div class="col bg-white padding-25">
                                     <div class="row tabsContainer tabContent  m-l-0 m-r-0" tab-name="top-spenders">
-                                        <list-component  key="2" section="topSpenders" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
+                                        <list-component  key="2" section="topSpenders" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 
+                                        'recency':'2022-02-15', 
+                                        'frequency': 15, 
+                                        
+                                        'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
                                             <template slot="list" slot-scope="{data}">
                                                 <company-component :data="data"></company-component>
                                             </template>
                                         </list-component>
                                     </div>
                                     <div class="row tabsContainer tabContent hide m-l-0 m-r-0 hide" tab-name="top-average-spenders" v-if="$store.getters.isAdmin">
-                                        <list-component  key="2" section="topAverageSpenders" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'business_type': 2, with_bookings:true, order_by:{ column:'spending_average_per_day', DESC:false}}">
+                                        <list-component  key="2" section="topAverageSpenders" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'recency':'2022-02-15', 'business_type': 2, with_bookings:true, order_by:{ column:'spending_average_per_day', DESC:false}}">
                                             <template slot="list" slot-scope="{data}">
                                                 <company-component :data="data"></company-component>
                                             </template>