diff --git a/Controllers/Vehicle/ReportController.cs b/Controllers/Vehicle/ReportController.cs
index cfe587f..53a8f91 100644
--- a/Controllers/Vehicle/ReportController.cs
+++ b/Controllers/Vehicle/ReportController.cs
@@ -13,6 +13,7 @@ namespace CarCareTracker.Controllers
         public IActionResult GetReportPartialView(int vehicleId)
         {
             //get records
+            var vehicleData = _dataAccess.GetVehicleById(vehicleId);
             var serviceRecords = _serviceRecordDataAccess.GetServiceRecordsByVehicleId(vehicleId);
             var gasRecords = _gasRecordDataAccess.GetGasRecordsByVehicleId(vehicleId);
             var collisionRecords = _collisionRecordDataAccess.GetCollisionRecordsByVehicleId(vehicleId);
@@ -86,7 +87,10 @@ namespace CarCareTracker.Controllers
             viewModel.Collaborators = collaborators;
             //get MPG per month.
             var mileageData = _gasHelper.GetGasRecordViewModels(gasRecords, userConfig.UseMPG, userConfig.UseUKMPG);
+            string preferredFuelMileageUnit = _config.GetUserConfig(User).PreferredGasMileageUnit;
+            var fuelEconomyMileageUnit = StaticHelper.GetFuelEconomyUnit(vehicleData.IsElectric, vehicleData.UseHours, userConfig.UseMPG, userConfig.UseUKMPG);
             mileageData.RemoveAll(x => x.MilesPerGallon == default);
+            bool invertedFuelMileageUnit = fuelEconomyMileageUnit == "l/100km" && preferredFuelMileageUnit == "km/l";
             var monthlyMileageData = StaticHelper.GetBaseLineCostsNoMonthName();
             monthlyMileageData.AddRange(mileageData.GroupBy(x => x.MonthId).Select(x => new CostForVehicleByMonth
             {
@@ -99,7 +103,22 @@ namespace CarCareTracker.Controllers
                 MonthName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(x.Key),
                 Cost = x.Sum(y => y.Cost)
             }).ToList();
-            viewModel.FuelMileageForVehicleByMonth = monthlyMileageData;
+            if (invertedFuelMileageUnit)
+            {
+                foreach(CostForVehicleByMonth monthMileage in monthlyMileageData)
+                {
+                    if (monthMileage.Cost != default)
+                    {
+                        monthMileage.Cost = 100 / monthMileage.Cost;
+                    }
+                }
+            }
+            var mpgViewModel = new MPGForVehicleByMonth { 
+                CostData = monthlyMileageData,
+                Unit = invertedFuelMileageUnit ? preferredFuelMileageUnit : fuelEconomyMileageUnit,
+                SortedCostData = (userConfig.UseMPG || userConfig.UseUKMPG || invertedFuelMileageUnit) ? monthlyMileageData.OrderByDescending(x => x.Cost).ToList() : monthlyMileageData.OrderBy(x => x.Cost).ToList()
+            };
+            viewModel.FuelMileageForVehicleByMonth = mpgViewModel;
             return PartialView("_Report", viewModel);
         }
         [TypeFilter(typeof(CollaboratorFilter))]
@@ -413,8 +432,12 @@ namespace CarCareTracker.Controllers
         [HttpPost]
         public IActionResult GetMonthMPGByVehicle(int vehicleId, int year = 0)
         {
+            var vehicleData = _dataAccess.GetVehicleById(vehicleId);
             var gasRecords = _gasRecordDataAccess.GetGasRecordsByVehicleId(vehicleId);
             var userConfig = _config.GetUserConfig(User);
+            string preferredFuelMileageUnit = _config.GetUserConfig(User).PreferredGasMileageUnit;
+            var fuelEconomyMileageUnit = StaticHelper.GetFuelEconomyUnit(vehicleData.IsElectric, vehicleData.UseHours, userConfig.UseMPG, userConfig.UseUKMPG);
+            bool invertedFuelMileageUnit = fuelEconomyMileageUnit == "l/100km" && preferredFuelMileageUnit == "km/l";
             var mileageData = _gasHelper.GetGasRecordViewModels(gasRecords, userConfig.UseMPG, userConfig.UseUKMPG);
             if (year != 0)
             {
@@ -433,7 +456,23 @@ namespace CarCareTracker.Controllers
                 MonthName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(x.Key),
                 Cost = x.Sum(y => y.Cost)
             }).ToList();
-            return PartialView("_MPGByMonthReport", monthlyMileageData);
+            if (invertedFuelMileageUnit)
+            {
+                foreach (CostForVehicleByMonth monthMileage in monthlyMileageData)
+                {
+                    if (monthMileage.Cost != default)
+                    {
+                        monthMileage.Cost = 100 / monthMileage.Cost;
+                    }
+                }
+            }
+            var mpgViewModel = new MPGForVehicleByMonth
+            {
+                CostData = monthlyMileageData,
+                Unit = invertedFuelMileageUnit ? preferredFuelMileageUnit : fuelEconomyMileageUnit,
+                SortedCostData = (userConfig.UseMPG || userConfig.UseUKMPG || invertedFuelMileageUnit) ? monthlyMileageData.OrderByDescending(x => x.Cost).ToList() : monthlyMileageData.OrderBy(x => x.Cost).ToList()
+            };
+            return PartialView("_MPGByMonthReport", mpgViewModel);
         }
         [TypeFilter(typeof(CollaboratorFilter))]
         [HttpPost]
diff --git a/Helper/StaticHelper.cs b/Helper/StaticHelper.cs
index 29329e1..8935cd1 100644
--- a/Helper/StaticHelper.cs
+++ b/Helper/StaticHelper.cs
@@ -119,6 +119,10 @@ namespace CarCareTracker.Helper
                 new CostForVehicleByMonth { MonthId = 12, Cost = 0M}
             };
         }
+        public static List<string> GetBarChartColors()
+        {
+            return new List<string> { "#00876c", "#43956e", "#67a371", "#89b177", "#a9be80", "#c8cb8b", "#e6d79b", "#e4c281", "#e3ab6b", "#e2925b", "#e07952", "#db5d4f" };
+        }
 
         public static ServiceRecord GenericToServiceRecord(GenericRecord input)
         {
diff --git a/Models/Report/MPGForVehicleByMonth.cs b/Models/Report/MPGForVehicleByMonth.cs
new file mode 100644
index 0000000..8de0915
--- /dev/null
+++ b/Models/Report/MPGForVehicleByMonth.cs
@@ -0,0 +1,9 @@
+namespace CarCareTracker.Models
+{
+    public class MPGForVehicleByMonth
+    {
+        public List<CostForVehicleByMonth> CostData { get; set; } = new List<CostForVehicleByMonth>();
+        public List<CostForVehicleByMonth> SortedCostData { get; set; } = new List<CostForVehicleByMonth>();
+        public string Unit { get; set; }
+    }
+}
diff --git a/Models/Report/ReportViewModel.cs b/Models/Report/ReportViewModel.cs
index 2c2e6a4..7696f3d 100644
--- a/Models/Report/ReportViewModel.cs
+++ b/Models/Report/ReportViewModel.cs
@@ -3,7 +3,7 @@
     public class ReportViewModel
     {
         public List<CostForVehicleByMonth> CostForVehicleByMonth { get; set; } = new List<CostForVehicleByMonth>();
-        public List<CostForVehicleByMonth> FuelMileageForVehicleByMonth { get; set; } = new List<CostForVehicleByMonth>();
+        public MPGForVehicleByMonth FuelMileageForVehicleByMonth { get; set; } = new MPGForVehicleByMonth();
         public CostMakeUpForVehicle CostMakeUpForVehicle { get; set; } = new CostMakeUpForVehicle();
         public ReminderMakeUpForVehicle ReminderMakeUpForVehicle { get; set; } = new ReminderMakeUpForVehicle();
         public List<int> Years { get; set; } = new List<int>();
diff --git a/Views/Vehicle/_GasCostByMonthReport.cshtml b/Views/Vehicle/_GasCostByMonthReport.cshtml
index 33f15e2..3463fb5 100644
--- a/Views/Vehicle/_GasCostByMonthReport.cshtml
+++ b/Views/Vehicle/_GasCostByMonthReport.cshtml
@@ -5,10 +5,10 @@
 @{
     var userConfig = config.GetUserConfig(User);
     var userLanguage = userConfig.UserLanguage;
-    var barGraphColors = new string[] { "#00876c", "#43956e", "#67a371", "#89b177", "#a9be80", "#c8cb8b", "#e6d79b", "#e4c281", "#e3ab6b", "#e2925b", "#e07952", "#db5d4f" };
+    var barGraphColors = StaticHelper.GetBarChartColors();
     var sortedByMPG = Model.OrderBy(x => x.Cost).ToList();
 }
-@if (Model.Where(x=>x.Cost > 0).Any() || Model.Where(x=>x.DistanceTraveled > 0).Any())
+@if (Model.Any(x=>x.Cost > 0) || Model.Any(x=>x.DistanceTraveled > 0))
 {
     <canvas id="bar-chart"></canvas>
     <script>
diff --git a/Views/Vehicle/_MPGByMonthReport.cshtml b/Views/Vehicle/_MPGByMonthReport.cshtml
index e001918..cb2d7da 100644
--- a/Views/Vehicle/_MPGByMonthReport.cshtml
+++ b/Views/Vehicle/_MPGByMonthReport.cshtml
@@ -1,14 +1,13 @@
 @using CarCareTracker.Helper
 @inject IConfigHelper config
 @inject ITranslationHelper translator
-@model List<CostForVehicleByMonth>
+@model MPGForVehicleByMonth
 @{
-    var barGraphColors = new string[] { "#00876c", "#43956e", "#67a371", "#89b177", "#a9be80", "#c8cb8b", "#e6d79b", "#e4c281", "#e3ab6b", "#e2925b", "#e07952", "#db5d4f" };
-    var sortedByMPG = Model.OrderByDescending(x => x.Cost).ToList();
+    var barGraphColors = StaticHelper.GetBarChartColors();
     var userConfig = config.GetUserConfig(User);
     var userLanguage = userConfig.UserLanguage;
 }
-@if (Model.Where(x => x.Cost > 0).Any())
+@if (Model.CostData.Any(x => x.Cost > 0))
 {
 
     <canvas id="bar-chart-mpg"></canvas>
@@ -20,11 +19,11 @@
             //color gradient from high to low
             var barGraphColors = [];
             var useDarkMode = getGlobalConfig().useDarkMode;
-        @foreach (CostForVehicleByMonth gasCost in Model)
+        @foreach (CostForVehicleByMonth gasCost in Model.CostData)
         {
             @:barGraphLabels.push(decodeHTMLEntities("@gasCost.MonthName"));
             @:barGraphData.push(globalParseFloat('@gasCost.Cost'));
-            var index = sortedByMPG.FindIndex(x => x.MonthName == gasCost.MonthName);
+            var index = Model.SortedCostData.FindIndex(x => x.MonthName == gasCost.MonthName);
             @:barGraphColors.push('@barGraphColors[index]');
         }
                 new Chart($("#bar-chart-mpg"), {
@@ -44,7 +43,7 @@
                             title: {
                                 display: true,
                                 color: useDarkMode ? "#fff" : "#000",
-                                text: decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel Mileage by Month")')
+                                text: decodeHTMLEntities('@($"{translator.Translate(userLanguage, "Fuel Mileage by Month")}({Model.Unit})")')
                             },
                             legend: {
                                 display: false,