diff --git a/resources/assets/vue/components/bookings/elements/FilterBookingComponent.vue b/resources/assets/vue/components/bookings/elements/FilterBookingComponent.vue
new file mode 100644
index 00000000..a236bf8a
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/FilterBookingComponent.vue
@@ -0,0 +1,134 @@
+<template>
+    <div class="row">
+        <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>
+            </div>
+            <div class="row" @keyup.enter="submitSearch()" v-show="!isLoading">
+                <div class="col-12 col-md">
+                    <choose-currency-component v-on:input="updateCurrencyId($event)" :currecy_id="filters.fixed_currency_id"></choose-currency-component>
+                </div>
+                <div class="col-12 col-md">
+                    <choose-service-component v-on:input="updateServiceId($event)" v-on:loaded="doneLoadingServiceId"></choose-service-component>
+                </div>
+                <div class="col-12 col-md">
+                    <validation-wrapper-component selectable :validator="$v.filters.status">
+                        <label>Status</label>
+                        <select-component :options="['Active', 'Complete']" v-model="filters.status"></select-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col-auto">
+                    <div class="row h-100">
+                        <div class="col">
+                            <button type="button" class="btn btn-lg btn-primary w-100 h-100 d-block" @click="submitSearch()">Search</button>
+                        </div>
+                        <div class="col">
+                            <button type="button" class="btn btn-lg btn-default w-100 h-100 d-block" @click="reset()">Reset</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-t-50" v-if="hasSubmited">
+                <div class="col">
+                    <list-component :key="searchKey" section="transferFiltersSection" :endpoint="route('api.booking.list')" :options="options">
+                        <template slot="list" slot-scope="{data}">
+                            <booking-component :data="data"></booking-component>
+                        </template>
+                    </list-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import { required, requiredIf, minValue, decimal } from "vuelidate/lib/validators";
+    export default {
+        data() {
+            return {
+                isLoading: true,
+                searchKey: 1,
+                hasSubmited: false,
+                options: {
+                    per_page: 10
+                },
+                filters: {
+                    fixed_currency_id: null,
+                    service_id: null,
+                    status: null,
+                },
+            }
+        },
+        validations: {
+            filters: {
+                fixed_currency_id: {},
+                service_id: {},
+                status: {},
+            }
+        },
+        methods: {
+            submitSearch() {
+
+                this.options = {
+                    per_page: 10
+                },
+
+                this.filters.service_id != null ? (this.options.service_id = this.filters.service_id) : null;
+
+                this.filters.fixed_currency_id != null ? (this.options.fixed_currency_id = this.filters.fixed_currency_id) : null;
+
+                if (this.filters.status != null) {
+                    switch(this.filters.status) {
+                        case 'Active':
+                            this.options.status = '2';
+                            break;
+
+                        case 'Complete':
+                            this.options.status = '3';
+                            break;
+                        }
+                }
+
+                this.searchKey +=1;
+                this.hasSubmited = true;
+            },
+            reset() {
+                this.marking = '';
+                this.hasSubmited = false;
+                this.currentKey += 1;
+            },
+            updateCurrencyId(id){
+                this.filters.fixed_currency_id = id;
+            },
+            updateServiceId(id){
+                this.filters.service_id = id;
+            },
+            doneLoadingServiceId(){
+                this.isLoading = !this.isLoading;
+
+                var currency = new URL(location.href).searchParams.get('currency');
+                if (currency != null) {
+                    switch (currency) {
+                        case 'usd':
+                            this.filters.fixed_currency_id = 3;
+                            this.submitSearch();
+                            break;
+                        case 'cny':
+                            this.filters.fixed_currency_id = 2;
+                            this.submitSearch();
+                            break;
+                        case 'rmb':
+                            this.filters.fixed_currency_id = 2;
+                            this.submitSearch();
+                            break;
+                    }
+                }
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/ChooseCurrencyComponent.vue b/resources/assets/vue/components/bookings/forms/ChooseCurrencyComponent.vue
index e670a450..0fc1cd49 100644
--- a/resources/assets/vue/components/bookings/forms/ChooseCurrencyComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/ChooseCurrencyComponent.vue
@@ -28,7 +28,7 @@
                                             v-bind:key="currency.id">
                                             <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
                                                 :class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
-                                                @click="UpdateCurrency(currency)">
+                                                @click="updateCurrency(currency)">
                                                 <div class="row align-items-center justify-content-center">
                                                     <div class="col">
                                                         <div class="row align-items-center justify-content-center">
@@ -59,6 +59,19 @@
 
 <script>
 export default {
+    props: {
+        currecy_id: {
+            type: Number,
+            required: false,
+            default: null
+        },
+    },
+    watch: {
+        currecy_id(newValue, oldValue) {
+            var currencySelected = this.currencyList.find(currencyList => currencyList.id === newValue);
+            this.updateCurrency(currencySelected);
+        }
+    },
     data() {
         return {
             section: 'chooseCurrencySection',
@@ -105,10 +118,10 @@ export default {
         };
     },
     mounted() {
-        this.UpdateCurrency(Object.values(this.currencyList)[0]);
+        this.updateCurrency(Object.values(this.currencyList)[0]);
     },
     methods: {
-        UpdateCurrency(currency) {
+        updateCurrency(currency) {
             this.selectedCurrency = currency;
             this.recipientMenu = false;
             this.$emit('input', currency.id);
diff --git a/resources/views/pages/bookings/filter.blade.php b/resources/views/pages/bookings/filter.blade.php
new file mode 100644
index 00000000..f187597c
--- /dev/null
+++ b/resources/views/pages/bookings/filter.blade.php
@@ -0,0 +1,17 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col-12">
+                    <div class="row m-b-15 p-b-10 b-b b-grey">
+                        <div class="col">
+                            <small class="all-caps muted fs-10">Transfer Filters</small>
+                        </div>
+                    </div>
+                    <filter-booking-component section="transferFiltersSection" ></filter-booking-component>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index b91c818b..a6a4005f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -94,6 +94,10 @@ Route::get('/transfers', function () {
     return view('pages.bookings.index');
 })->name('bookings');
 
+Route::get('/list-transfer', function () {
+    return view('pages.bookings.filter');
+})->name('list_transfer');
+
 Route::get('/bookings/urgent', function () {
     return view('pages.urgent_list');
 })->name('bookings.urgent');