diff --git a/Views/Home/_GarageDisplay.cshtml b/Views/Home/_GarageDisplay.cshtml
index a4832a6..84b2528 100644
--- a/Views/Home/_GarageDisplay.cshtml
+++ b/Views/Home/_GarageDisplay.cshtml
@@ -28,7 +28,7 @@
     <div class="row gy-3 align-items-stretch vehiclesContainer">
         @foreach (Vehicle vehicle in Model)
         {
-            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
+            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="@await Html.PartialAsync("_VehicleExtraFields", vehicle.ExtraFields)" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
                 <div class="card" onclick="viewVehicle(@vehicle.Id)">
                     <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down; pointer-events:none; @(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
                     @if (!string.IsNullOrWhiteSpace(vehicle.SoldDate))
diff --git a/Views/Home/_VehicleExtraFields.cshtml b/Views/Home/_VehicleExtraFields.cshtml
new file mode 100644
index 0000000..d27fe87
--- /dev/null
+++ b/Views/Home/_VehicleExtraFields.cshtml
@@ -0,0 +1,10 @@
+@model List<ExtraField>
+@if (Model.Any())
+{
+    <ul class='list-group list-group-flush'>
+        @foreach (ExtraField field in Model)
+        {
+            <li><b>@field.Name</b> : @field.Value</li>
+        }
+    </ul>
+}
\ No newline at end of file
diff --git a/wwwroot/js/garage.js b/wwwroot/js/garage.js
index ad6036e..ef2158a 100644
--- a/wwwroot/js/garage.js
+++ b/wwwroot/js/garage.js
@@ -173,27 +173,8 @@ function performLogOut() {
 }
 function loadPinnedNotes(vehicleId) {
     var hoveredGrid = $(`#gridVehicle_${vehicleId}`);
-    if (hoveredGrid.attr("data-bs-title") == undefined) {
-        $.get(`/Vehicle/GetPinnedNotesByVehicleId?vehicleId=${vehicleId}`, function (data) {
-            if (data.length > 0) {
-                //converted pinned notes to html.
-                var htmlString = "<ul class='list-group list-group-flush'>";
-                data.forEach(x => {
-                    htmlString += `<li><b>${x.description}</b> : ${x.noteText}</li>`;
-                });
-                htmlString += "</ul>";
-                hoveredGrid.attr("data-bs-title", htmlString);
-                new bootstrap.Tooltip(hoveredGrid);
-                hoveredGrid.tooltip("show");
-            } else {
-                //disable the tooltip
-                hoveredGrid.attr("data-bs-title", "");
-            }
-        });
-    } else {
-        if (hoveredGrid.attr("data-bs-title") != '') {
-            hoveredGrid.tooltip("show");
-        }
+    if (hoveredGrid.attr("data-bs-title") != '') {
+        hoveredGrid.tooltip("show");
     }
 }
 function hidePinnedNotes(vehicleId) {