diff --git a/app/Classes/General/Eloquent/Filters/CreatedAfterOrEqual.php b/app/Classes/General/Eloquent/Filters/CreatedAfterOrEqual.php
index 7e563aee..9df98f40 100644
--- a/app/Classes/General/Eloquent/Filters/CreatedAfterOrEqual.php
+++ b/app/Classes/General/Eloquent/Filters/CreatedAfterOrEqual.php
@@ -16,6 +16,8 @@ class CreatedAfterOrEqual implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->where('created_at', '>=', Carbon::parse($value));
+        $table = $builder->getModel()->getTable();
+        $startDate = Carbon::createFromFormat('d-m-Y', $value)->startOfDay();
+        return $builder->where("{$table}.created_at", '>=', $startDate);
     }
 }
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/CreatedBeforeOrEqual.php b/app/Classes/General/Eloquent/Filters/CreatedBeforeOrEqual.php
index ed97b48f..5b349540 100644
--- a/app/Classes/General/Eloquent/Filters/CreatedBeforeOrEqual.php
+++ b/app/Classes/General/Eloquent/Filters/CreatedBeforeOrEqual.php
@@ -15,6 +15,8 @@ class CreatedBeforeOrEqual implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->where('created_at', '<=', Carbon::parse($value));
+        $table = $builder->getModel()->getTable();
+        $endDate = Carbon::createFromFormat('d-m-Y', $value)->endOfDay();    
+        return $builder->where("{$table}.created_at", '<=', $endDate);
     }
 }
diff --git a/app/Classes/General/Eloquent/Filters/OwnerId.php b/app/Classes/General/Eloquent/Filters/OwnerId.php
index eac7e32d..c2dfa685 100644
--- a/app/Classes/General/Eloquent/Filters/OwnerId.php
+++ b/app/Classes/General/Eloquent/Filters/OwnerId.php
@@ -14,7 +14,8 @@ class OwnerId implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->where('owner_id', $value);
+        $table = $builder->getModel()->getTable();
+        return $builder->where("{$table}.owner_id", $value);
     }
 
 }
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/OwnerType.php b/app/Classes/General/Eloquent/Filters/OwnerType.php
index 6a13fb08..3feedccd 100644
--- a/app/Classes/General/Eloquent/Filters/OwnerType.php
+++ b/app/Classes/General/Eloquent/Filters/OwnerType.php
@@ -14,7 +14,8 @@ class OwnerType implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->where('owner_type', $value);
+        $table = $builder->getModel()->getTable();
+        return $builder->where("{$table}.owner_type", $value);
     }
 
 }
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/StatusIn.php b/app/Classes/General/Eloquent/Filters/StatusIn.php
index cbfdfbd0..85425802 100644
--- a/app/Classes/General/Eloquent/Filters/StatusIn.php
+++ b/app/Classes/General/Eloquent/Filters/StatusIn.php
@@ -14,7 +14,8 @@ class StatusIn implements Filter
      */
     public static function apply(Builder $builder, $value)
     {
-        return $builder->whereIn('status', $value);
+        $table = $builder->getModel()->getTable();
+        return $builder->whereIn("{$table}.status", $value);
     }
 
 }
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/WithBookingMarkingLike.php b/app/Classes/General/Eloquent/Filters/WithBookingMarkingLike.php
new file mode 100644
index 00000000..ed35cc31
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/WithBookingMarkingLike.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Models\Booking;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class WithBookingMarkingLike implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->join('transactions as t2', 't2.payment_reference', '=', 'transactions.bill_no')
+            ->join('bookings', function ($join) use ($value) {
+                $join->on('bookings.id', '=', 't2.owner_id')
+                    ->where('bookings.marking', 'LIKE', '%'.$value.'%');
+            })
+            ->addSelect(['transactions.*','t2.owner_id as bookingId', 'bookings.marking as bookingMarking']);
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
index 1250432b..aeb045ce 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
@@ -1,6 +1,29 @@
 <template>
     <div class="row">
         <div class="col">
+            <div class="row m-b-5">
+                <div class="col">
+                    <validation-wrapper-component :validator="$v.parameters.reference_no">
+                        <label class="all-caps">Booking Reference</label>
+                        <input type="text" class="form-control" v-model="parameters.reference_no" @keyup.enter="submitSearch">
+                    </validation-wrapper-component>
+                </div>
+                <div class="col">
+                    <validation-wrapper-component :validator="$v.parameters.startDate">
+                        <label class="all-caps">Start Date</label>
+                        <date-picker-component v-model.lazy="parameters.startDate"></date-picker-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col">
+                    <validation-wrapper-component :validator="$v.parameters.endDate">
+                        <label class="all-caps">End Date</label>
+                        <date-picker-component v-model.lazy="parameters.endDate"></date-picker-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col 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 class="row">
                 <div class="col">
                     <div class="row padding-10">
@@ -11,7 +34,7 @@
                         <div class="col-2 fs-10 text-right">Balance</div>
                     </div>
 
-                    <list-component :key="key" section="topUp" :endpoint="route('api.transaction.wallet.list')" :options="{status_in: [2, 3], owner_type: 'App\\Models\\Wallet', owner_id: wallet_id, per_page: showingTransactionCount}">
+                    <list-component :key="key" section="topUp" :endpoint="route('api.transaction.wallet.list')" :options="options">
                         <template slot="list" slot-scope="{data}">
                             <customer-wallet-transaction-component :data="data" :deciamls="deciamls"></customer-wallet-transaction-component>
                         </template>
@@ -39,12 +62,50 @@ export default {
     data(){
         return {
             key: 1,
+            parameters: {
+                reference_no: null,
+                startDate: null,
+                endDate: null,
+            },
+            options: {
+                status_in: [2, 3], 
+                owner_type: 'App\\Models\\Wallet', 
+                owner_id: this.wallet_id, 
+                per_page: this.showingTransactionCount
+            }
+        }
+    },
+    validations: {
+        parameters: {
+            reference_no: {  },
+            startDate: {  },
+            endDate: {  },
         }
     },
     watch: {
         showingTransactionCount() {
+            this.options.per_page = this.showingTransactionCount;
             this.key ++;
         }
-    }
+    },
+    methods: {
+        submitSearch() {
+            delete this.options.with_booking_marking_like;
+            delete this.options.created_after_or_equal;
+            delete this.options.created_before_or_equal;
+
+            if (this.parameters.reference_no) {
+                this.options.with_booking_marking_like = this.parameters.reference_no
+            }
+            if (this.parameters.startDate) {
+                this.options.created_after_or_equal = this.parameters.startDate
+            }
+            if (this.parameters.endDate) {
+                this.options.created_before_or_equal = this.parameters.endDate
+            }
+            
+            this.key ++;
+        },
+    },
 }
 </script>