diff --git a/Views/Vehicle/_CostDistanceTableReport.cshtml b/Views/Vehicle/_CostDistanceTableReport.cshtml
index 22a8e0c..f151ae6 100644
--- a/Views/Vehicle/_CostDistanceTableReport.cshtml
+++ b/Views/Vehicle/_CostDistanceTableReport.cshtml
@@ -22,10 +22,10 @@
                     <table class="table table-hover">
                         <thead class="sticky-top">
                             <tr class="d-flex">
-                                <th scope="col" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@(translator.Translate(userLanguage, "Year"))</th>
+                                <th scope="col" style="cursor:pointer;" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@(translator.Translate(userLanguage, "Year"))</th>
                                 @foreach(int year in years){
                                     if (year != default){
-                                        <th scope="col" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@year</th>
+                                        <th scope="col" style="cursor:pointer;" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@year</th>
                                     }
                                 }
                             </tr>
diff --git a/Views/Vehicle/_CostMakeUpReport.cshtml b/Views/Vehicle/_CostMakeUpReport.cshtml
index bbd1570..7bd87a0 100644
--- a/Views/Vehicle/_CostMakeUpReport.cshtml
+++ b/Views/Vehicle/_CostMakeUpReport.cshtml
@@ -16,28 +16,33 @@
             new Chart($("#pie-chart"), {
                 type: 'pie',
                 data: {
-                    labels: [decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
-                    decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
-                    decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
-                    decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")'),
-                    decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")')],
+                    labels: [
+                        decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
+                        decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
+                        decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
+                        decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")'),
+                        decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")')
+                    ],
                     datasets: [
                         {
                             label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'),
-                            backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"],
+                            backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ffa600", "#ff6361" ],
                             data: [
                                 globalParseFloat('@Model.ServiceRecordSum'),
                                 globalParseFloat('@Model.CollisionRecordSum'),
                                 globalParseFloat('@Model.UpgradeRecordSum'),
-                                globalParseFloat('@Model.TaxRecordSum'),
-                                globalParseFloat('@Model.GasRecordSum')
+                                globalParseFloat('@Model.GasRecordSum'),
+                                globalParseFloat('@Model.TaxRecordSum')
                             ]
                         }
                     ]
                 },
                 options: {
-                    onClick: (e) => {
-                        showDataTable();
+                    onClick: (e, a, c) => {
+                        showDataTable(a);
+                    },
+                    onHover: (e, a, c) => {
+                        a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
                     },
                     plugins: {
                         legend: {
diff --git a/Views/Vehicle/_GasCostByMonthReport.cshtml b/Views/Vehicle/_GasCostByMonthReport.cshtml
index a9bc880..19e6859 100644
--- a/Views/Vehicle/_GasCostByMonthReport.cshtml
+++ b/Views/Vehicle/_GasCostByMonthReport.cshtml
@@ -52,8 +52,11 @@
                         ]
                     },
                     options: {
-                        onClick: (e) => {
-                            showBarChartTable();
+                        onClick: (e, a, c) => {
+                            showBarChartTable(a);
+                        },
+                        onHover: (e, a, c) => {
+                            a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
                         },
                         plugins: {
                             title: {
diff --git a/wwwroot/js/reports.js b/wwwroot/js/reports.js
index 3a8688b..19270b1 100644
--- a/wwwroot/js/reports.js
+++ b/wwwroot/js/reports.js
@@ -176,7 +176,7 @@ function refreshBarChart() {
     });
     setSelectedMetrics();
 }
-function showBarChartTable() {
+function showBarChartTable(elemClicked) {
     var selectedMetrics = [];
     var vehicleId = GetVehicleId().vehicleId;
     var year = getYear();
@@ -208,6 +208,14 @@ function showBarChartTable() {
         }, function (data) {
             $("#vehicleDataTableModalContent").html(data);
             $("#vehicleDataTableModal").modal('show');
+            //highlight clicked row.
+            if (elemClicked.length > 0) {
+                var rowClickedIndex = elemClicked[0].index + 1;
+                var rowToHighlight = $("#vehicleDataTableModalContent").find(`tbody > tr:nth-child(${rowClickedIndex})`);
+                if (rowToHighlight.length > 0) {
+                    rowToHighlight.addClass('table-info');
+                }
+            }
         });
 }
 function toggleBarChartTableData() {
@@ -311,12 +319,19 @@ function exportAttachments() {
         }
     });
 }
-function showDataTable() {
+function showDataTable(elemClicked) {
     var vehicleId = GetVehicleId().vehicleId;
     var year = getYear();
     $.get(`/Vehicle/GetCostTableForVehicle?vehicleId=${vehicleId}`, { year: year }, function (data) {
         $("#vehicleDataTableModalContent").html(data);
         $("#vehicleDataTableModal").modal('show');
+        if (elemClicked.length > 0) {
+            var rowClickedIndex = elemClicked[0].index + 1;
+            var rowToHighlight = $("#vehicleDataTableModalContent").find(`tbody > tr:nth-child(${rowClickedIndex})`);
+            if (rowToHighlight.length > 0) {
+                rowToHighlight.addClass('table-info');
+            }
+        }
     });
 }
 function hideDataTable() {