diff --git a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
index b55d39c9..f0721f83 100644
--- a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
@@ -29,8 +29,8 @@
             </div>
             <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>           
             <div class="row" v-if="!isLoading && !hasError">
-                <div class="col-12 mx-auto p-0 " style="width: 800px; height:350px">
-                    <canvas id="currency-history-chart"></canvas>
+                <div class="col-12 mx-auto p-0 ">
+                    <canvas style="width: 800px; height:350px" id="currency-history-chart"></canvas>
                 </div>
             </div>
             <div class="row" v-if="hasError">
@@ -81,14 +81,32 @@ export default {
                 date_from: null,
             },
             chartLebels:[],
-            chartData: []
+            chartData: [],
+            paymentMethodsConst: [],
+            colors: [
+                'red',
+                'green',
+                'blue',
+                'yellow'
+            ]
         };
     },
+    props:{
+        paymentMethods: {
+            type: Object
+        }
+    },
     computed: {
         pendingQueue() {
             return this.$store.getters.isInCompleteQueue(this.section);
         }
     },
+    mounted(){
+        this.paymentMethodsConst = Object.entries(this.paymentMethods).reduce((acc, [key, value]) => {
+        acc[value] = key;
+        return acc;
+        }, {});
+    },
     watch: {
         pendingQueue(inComplete) {
             if (inComplete) {
@@ -140,25 +158,55 @@ export default {
     },
     watch: {
         rateHistory: function(newVal) {
-                this.chartLebels = [];
-                this.chartData = [];
-                for (var i = 0; i < newVal.length; i++) {
-                    this.chartLebels.push(newVal[i].created_at.split("-")[0]);
-                    this.chartData.push(newVal[i]["rate"]);
+                // Set current month and year
+                const date = new Date();
+                const currentMonth = date.getMonth() + 1;
+                const currentYear = date.getFullYear();
+
+                // Group rates by payment method type
+                const ratesByType = {};
+                newVal.forEach(rate => {
+                if (!ratesByType[rate.payment_method_type]) {
+                    ratesByType[rate.payment_method_type] = [];
                 }
+                ratesByType[rate.payment_method_type].push(rate);
+                });
+
+                // Get rates for current month
+                const ratesForMonth = {};
+                Object.keys(ratesByType).forEach(type => {
+                ratesForMonth[type] = [];
+                for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
+                    const dateStr = `${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`;
+                    const rate = ratesByType[type].find(r => r.created_at === dateStr);
+                    ratesForMonth[type].push(rate ? rate.rate : '');
+                }
+                });
+
+                // Generate labels for chart
+                const labels = [];
+                for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
+                    labels.push(`${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`);
+                }
+
+                // Generate datasets for chart
+                const datasets = [];
+                Object.keys(ratesForMonth).forEach(type => {
+                datasets.push({
+                    label: `${this.paymentMethodsConst[type]}`,
+                    data: ratesForMonth[type],
+                    borderColor: `#${Math.floor(Math.random()*16777215).toString(16)}`,
+                    fill: false
+                });
+                });
+
                 setTimeout(() => {
                     const ctx = document.getElementById("currency-history-chart");
                     new Chart(ctx, {
                         type: 'line',
                         data: {
-                            labels: this.chartLebels,
-                            datasets: [{
-                                label: 'Currency Rate History',
-                                data: this.chartData,
-                                fill: false,
-                                borderColor: 'rgb(75, 192, 192)',
-                                tension: 0.1
-                            }]
+                            labels: labels,
+                            datasets: datasets
                         },
                     });
                 }, 300);
diff --git a/resources/views/pages/rate_histories.blade.php b/resources/views/pages/rate_histories.blade.php
index accb0591..4d19ef10 100644
--- a/resources/views/pages/rate_histories.blade.php
+++ b/resources/views/pages/rate_histories.blade.php
@@ -2,7 +2,7 @@
 @section('inner_content')
     <div class="row">
         <div class="col p-t-15 p-b-15">
-            <rate-histories-component></rate-histories-component>
+            <rate-histories-component :payment-methods="{{ json_encode($paymentMethods) }}"></rate-histories-component>
         </div>
     </div>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index 35ad7015..053c500e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,26 +1,27 @@
 <?php
 
-use App\Classes\Modules\Bookings\Processors\CreatePurchaseOrderFor1688OrderProcessor;
-use App\Classes\Modules\Documents\DataTransferObjects\DocumentObject;
-use App\Classes\Modules\Documents\Services\CreatesDocument;
-use App\Classes\Modules\Documents\Services\CreatesFiles;
-use App\Classes\ValueObjects\Constants\ApprovalStatus;
-use App\Classes\ValueObjects\Constants\DocumentType;
-use App\Classes\ValueObjects\Constants\TransactionType;
+use Carbon\Carbon;
+use App\Models\User;
+use App\Models\Wallet;
 use App\Models\Booking;
 use App\Models\Company;
 use App\Models\Transaction;
-use App\Models\User;
-use App\Models\Wallet;
-use Carbon\Carbon;
+use Illuminate\Support\Str;
 use Illuminate\Http\Request;
+use Maatwebsite\Excel\Excel;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Storage;
-use Illuminate\Support\Str;
-use Maatwebsite\Excel\Excel;
 use Mccarlosen\LaravelMpdf\Facades\LaravelMpdf;
+use App\Classes\ValueObjects\Constants\DocumentType;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Classes\Modules\Documents\Services\CreatesFiles;
+use App\Classes\ValueObjects\Constants\PaymentMethodType;
+use App\Classes\Modules\Documents\Services\CreatesDocument;
 use Webklex\PDFMerger\Facades\PDFMergerFacade as PDFMerger;
+use App\Classes\Modules\Documents\DataTransferObjects\DocumentObject;
+use App\Classes\Modules\Bookings\Processors\CreatePurchaseOrderFor1688OrderProcessor;
 
 /*
 |--------------------------------------------------------------------------
@@ -539,7 +540,8 @@ Route::get('/refund/fix', function(){
 });
 
 Route::get('/currency-rate-history', function () {
-    return view('pages.rate_histories');
+    $paymentMethods = PaymentMethodType::PAYMENT_METHODS;
+    return view('pages.rate_histories')->with('paymentMethods', $paymentMethods);
 })->name('currency_rate.history');