diff --git a/public/viewjs/batteriesoverview.js b/public/viewjs/batteriesoverview.js
index 5f07d238..fc18880f 100644
--- a/public/viewjs/batteriesoverview.js
+++ b/public/viewjs/batteriesoverview.js
@@ -114,12 +114,6 @@ $(document).on('click', '.track-charge-cycle-button', function(e)
 	);
 });
 
-$(document).on("click", ".battery-name-cell", function(e)
-{
-	Grocy.Components.BatteryCard.Refresh($(e.currentTarget).attr("data-battery-id"));
-	$("#batteriesoverview-batterycard-modal").modal("show");
-});
-
 $(document).on('click', '.battery-grocycode-label-print', function(e)
 {
 	e.preventDefault();
diff --git a/public/viewjs/choresoverview.js b/public/viewjs/choresoverview.js
index b09757de..1de9ca52 100644
--- a/public/viewjs/choresoverview.js
+++ b/public/viewjs/choresoverview.js
@@ -210,12 +210,6 @@ $(document).on('click', '.track-chore-button', function(e)
 	);
 });
 
-$(document).on("click", ".chore-name-cell", function(e)
-{
-	Grocy.Components.ChoreCard.Refresh($(e.currentTarget).attr("data-chore-id"));
-	$("#choresoverview-chorecard-modal").modal("show");
-});
-
 $(document).on('click', '.chore-grocycode-label-print', function(e)
 {
 	e.preventDefault();
diff --git a/public/viewjs/components/batterycard.js b/public/viewjs/components/batterycard.js
index 6533628d..37120200 100644
--- a/public/viewjs/components/batterycard.js
+++ b/public/viewjs/components/batterycard.js
@@ -24,3 +24,9 @@ Grocy.Components.BatteryCard.Refresh = function(batteryId)
 		}
 	);
 };
+
+$(document).on("click", ".batterycard-trigger", function(e)
+{
+	Grocy.Components.BatteryCard.Refresh($(e.currentTarget).attr("data-battery-id"));
+	$("#batterycard-modal").modal("show");
+});
diff --git a/public/viewjs/components/chorecard.js b/public/viewjs/components/chorecard.js
index 318a865e..200dfe2b 100644
--- a/public/viewjs/components/chorecard.js
+++ b/public/viewjs/components/chorecard.js
@@ -48,3 +48,9 @@ Grocy.Components.ChoreCard.Refresh = function(choreId)
 		}
 	);
 };
+
+$(document).on("click", ".chorecard-trigger", function(e)
+{
+	Grocy.Components.ChoreCard.Refresh($(e.currentTarget).attr("data-chore-id"));
+	$("#chorecard-modal").modal("show");
+});
diff --git a/public/viewjs/components/productcard.js b/public/viewjs/components/productcard.js
index 3a52ee3f..970c3467 100644
--- a/public/viewjs/components/productcard.js
+++ b/public/viewjs/components/productcard.js
@@ -265,3 +265,13 @@ $("#productcard-product-description").on("hidden.bs.collapse", function()
 {
 	$(".expandable-text").find("a[data-toggle='collapse']").text(__t("Show more"));
 })
+
+$(document).on("click", ".productcard-trigger", function(e)
+{
+	var productId = $(e.currentTarget).attr("data-product-id");
+	if (productId != "")
+	{
+		Grocy.Components.ProductCard.Refresh(productId);
+		$("#productcard-modal").modal("show");
+	}
+});
diff --git a/public/viewjs/mealplan.js b/public/viewjs/mealplan.js
index 4fc6fa9f..05a3dbc8 100644
--- a/public/viewjs/mealplan.js
+++ b/public/viewjs/mealplan.js
@@ -264,7 +264,7 @@ $(".calendar").each(function()
 
 				element.html('\
 				<div> \
-					<h5 class="text-truncate mb-1 cursor-link display-product-button ' + additionalTitleCssClasses + '" data-toggle="tooltip" title="' + __t("Display product") + '" data-product-id="' + productDetails.product.id.toString() + '">' + productDetails.product.name + '</h5> \
+					<h5 class="text-truncate mb-1 cursor-link productcard-trigger ' + additionalTitleCssClasses + '" data-toggle="tooltip" title="' + __t("Display product") + '" data-product-id="' + productDetails.product.id.toString() + '">' + productDetails.product.name + '</h5> \
 					<h5 class="small text-truncate mb-1"><span class="locale-number locale-number-quantity-amount">' + mealPlanEntry.product_amount + "</span> " + __n(mealPlanEntry.product_amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural, true) + '</h5> \
 					<h5 class="small timeago-contextual text-truncate mb-1">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
 					' + costsAndCaloriesPerServing + ' \
@@ -951,14 +951,6 @@ $(document).on("click", ".display-recipe-button", function(e)
 	);
 });
 
-$(document).on("click", ".display-product-button", function(e)
-{
-	$(".tooltip").tooltip("hide");
-
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr('data-product-id'));
-	$("#mealplan-productcard-modal").modal("show");
-});
-
 $(document).on("click", ".mealplan-entry-done-button", function(e)
 {
 	e.preventDefault();
diff --git a/public/viewjs/products.js b/public/viewjs/products.js
index 7f87be52..3d91986e 100644
--- a/public/viewjs/products.js
+++ b/public/viewjs/products.js
@@ -175,9 +175,3 @@ $("#merge-products-save-button").on("click", function(e)
 		}
 	);
 });
-
-$(document).on("click", ".product-name-cell", function(e)
-{
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
-	$("#productcard-modal").modal("show");
-});
diff --git a/public/viewjs/recipeposform.js b/public/viewjs/recipeposform.js
index 316ffe06..c7174980 100644
--- a/public/viewjs/recipeposform.js
+++ b/public/viewjs/recipeposform.js
@@ -58,8 +58,6 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 
 	if (productId)
 	{
-		Grocy.Components.ProductCard.Refresh(productId);
-
 		Grocy.Api.Get('stock/products/' + productId,
 			function(productDetails)
 			{
diff --git a/public/viewjs/shoppinglist.js b/public/viewjs/shoppinglist.js
index 67c0cec9..27bbe8a2 100644
--- a/public/viewjs/shoppinglist.js
+++ b/public/viewjs/shoppinglist.js
@@ -145,15 +145,6 @@ $(document).on('click', '.shoppinglist-delete-button', function(e)
 	);
 });
 
-$(document).on("click", ".product-name-cell", function(e)
-{
-	if ($(e.currentTarget).attr("data-product-id") != "")
-	{
-		Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
-		$("#shoppinglist-productcard-modal").modal("show");
-	}
-});
-
 $(document).on('click', '#add-products-below-min-stock-amount', function(e)
 {
 	Grocy.Api.Post('stock/shoppinglist/add-missing-products', { "list_id": $("#selected-shopping-list").val() },
diff --git a/public/viewjs/stockentries.js b/public/viewjs/stockentries.js
index 649b69c3..22891de0 100644
--- a/public/viewjs/stockentries.js
+++ b/public/viewjs/stockentries.js
@@ -151,12 +151,6 @@ $(document).on('click', '.product-open-button', function(e)
 	);
 });
 
-$(document).on("click", ".stock-name-cell", function(e)
-{
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-stock-id"));
-	$("#stockentry-productcard-modal").modal("show");
-});
-
 $(document).on('click', '.stockentry-grocycode-label-print', function(e)
 {
 	e.preventDefault();
@@ -337,9 +331,3 @@ function UndoStockBookingEntry(bookingId, stockRowId)
 		}
 	);
 };
-
-$(document).on("click", ".product-name-cell", function(e)
-{
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
-	$("#productcard-modal").modal("show");
-});
diff --git a/public/viewjs/stockjournal.js b/public/viewjs/stockjournal.js
index 5d36a35a..2c0fd741 100644
--- a/public/viewjs/stockjournal.js
+++ b/public/viewjs/stockjournal.js
@@ -144,9 +144,3 @@ $(document).on('click', '.product-grocycode-label-print', function(e)
 		}
 	});
 });
-
-$(document).on("click", ".product-name-cell", function(e)
-{
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
-	$("#stockjournal-productcard-modal").modal("show");
-});
diff --git a/public/viewjs/stockoverview.js b/public/viewjs/stockoverview.js
index 8ebd0d8b..fb7159b4 100755
--- a/public/viewjs/stockoverview.js
+++ b/public/viewjs/stockoverview.js
@@ -229,12 +229,6 @@ $(document).on('click', '.product-open-button', function(e)
 	);
 });
 
-$(document).on("click", ".product-name-cell", function(e)
-{
-	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
-	$("#stockoverview-productcard-modal").modal("show");
-});
-
 function RefreshStatistics()
 {
 	Grocy.Api.Get('stock',
diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php
index f865b643..1abadfbd 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -129,7 +129,7 @@
 								<i class="fa-solid fa-ellipsis-v"></i>
 							</button>
 							<div class="table-inline-menu dropdown-menu dropdown-menu-right">
-								<a class="dropdown-item battery-name-cell"
+								<a class="dropdown-item batterycard-trigger"
 									data-battery-id="{{ $currentBatteryEntry->battery_id }}"
 									type="button"
 									href="#">
@@ -162,7 +162,7 @@
 							</div>
 						</div>
 					</td>
-					<td class="battery-name-cell cursor-link"
+					<td class="batterycard-trigger cursor-link"
 						data-battery-id="{{ $currentBatteryEntry->battery_id }}">
 						{{ FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->name }}
 					</td>
@@ -204,20 +204,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="batteriesoverview-batterycard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.batterycard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.batterycard', [
+'asModal' => true
+])
 @stop
diff --git a/views/choresoverview.blade.php b/views/choresoverview.blade.php
index cf6d177b..0d498680 100644
--- a/views/choresoverview.blade.php
+++ b/views/choresoverview.blade.php
@@ -174,7 +174,7 @@
 									<span>{{ $__t('Reschedule next execution') }}</span>
 								</a>
 								<div class="dropdown-divider"></div>
-								<a class="dropdown-item chore-name-cell"
+								<a class="dropdown-item chorecard-trigger"
 									data-chore-id="{{ $curentChoreEntry->chore_id }}"
 									type="button"
 									href="#">
@@ -207,7 +207,7 @@
 							</div>
 						</div>
 					</td>
-					<td class="chore-name-cell cursor-link"
+					<td class="chorecard-trigger cursor-link"
 						data-chore-id="{{ $curentChoreEntry->chore_id }}">
 						{{ FindObjectInArrayByPropertyValue($chores, 'id', $curentChoreEntry->chore_id)->name }}
 					</td>
@@ -286,22 +286,9 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="choresoverview-chorecard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.chorecard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.chorecard', [
+'asModal' => true
+])
 
 <div class="modal fade"
 	id="reschedule-chore-modal"
diff --git a/views/components/batterycard.blade.php b/views/components/batterycard.blade.php
index 8ba78637..b92d235d 100644
--- a/views/components/batterycard.blade.php
+++ b/views/components/batterycard.blade.php
@@ -4,28 +4,51 @@
 @endpush
 @endonce
 
-<div class="card batterycard">
-	<div class="card-header">
-		<span class="float-left">{{ $__t('Battery overview') }}</span>
-		<a id="batterycard-battery-edit-button"
-			class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
-			href="#"
-			data-toggle="tooltip"
-			title="{{ $__t('Edit battery') }}">
-			<i class="fa-solid fa-edit"></i>
-		</a>
-		<a id="batterycard-battery-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-			href="#">
-			{{ $__t('Battery journal') }}
-		</a>
-	</div>
-	<div class="card-body">
-		<h3><span id="batterycard-battery-name"></span></h3>
-		<strong>{{ $__t('Used in') }}:</strong> <span id="batterycard-battery-used_in"></span><br>
-		<strong>{{ $__t('Charge cycles count') }}:</strong> <span id="batterycard-battery-charge-cycles-count"
-			class="locale-number locale-number-generic"></span><br>
-		<strong>{{ $__t('Last charged') }}:</strong> <span id="batterycard-battery-last-charged"></span> <time id="batterycard-battery-last-charged-timeago"
-			class="timeago timeago-contextual"></time><br>
+@php if(!isset($asModal)) { $asModal = false; } @endphp
+
+@if($asModal)
+<div class="modal fade"
+	id="batterycard-modal"
+	tabindex="-1">
+	<div class="modal-dialog">
+		<div class="modal-content text-center">
+			<div class="modal-body">
+				@endif
+
+				<div class="card batterycard">
+					<div class="card-header">
+						<span class="float-left">{{ $__t('Battery overview') }}</span>
+						<a id="batterycard-battery-edit-button"
+							class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
+							href="#"
+							data-toggle="tooltip"
+							title="{{ $__t('Edit battery') }}">
+							<i class="fa-solid fa-edit"></i>
+						</a>
+						<a id="batterycard-battery-journal-button"
+							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
+							href="#">
+							{{ $__t('Battery journal') }}
+						</a>
+					</div>
+					<div class="card-body">
+						<h3><span id="batterycard-battery-name"></span></h3>
+						<strong>{{ $__t('Used in') }}:</strong> <span id="batterycard-battery-used_in"></span><br>
+						<strong>{{ $__t('Charge cycles count') }}:</strong> <span id="batterycard-battery-charge-cycles-count"
+							class="locale-number locale-number-generic"></span><br>
+						<strong>{{ $__t('Last charged') }}:</strong> <span id="batterycard-battery-last-charged"></span> <time id="batterycard-battery-last-charged-timeago"
+							class="timeago timeago-contextual"></time><br>
+					</div>
+				</div>
+
+				@if($asModal)
+			</div>
+			<div class="modal-footer">
+				<button type="button"
+					class="btn btn-secondary"
+					data-dismiss="modal">{{ $__t('Close') }}</button>
+			</div>
+		</div>
 	</div>
 </div>
+@endif
diff --git a/views/components/chorecard.blade.php b/views/components/chorecard.blade.php
index 527d7ff4..02a6c3aa 100644
--- a/views/components/chorecard.blade.php
+++ b/views/components/chorecard.blade.php
@@ -4,35 +4,58 @@
 @endpush
 @endonce
 
-<div class="card chorecard">
-	<div class="card-header">
-		<span class="float-left">{{ $__t('Chore overview') }}</span>
-		<a id="chorecard-chore-edit-button"
-			class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
-			href="#"
-			data-toggle="tooltip"
-			title="{{ $__t('Edit chore') }}">
-			<i class="fa-solid fa-edit"></i>
-		</a>
-		<a id="chorecard-chore-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-			href="#">
-			{{ $__t('Chore journal') }}
-		</a>
-	</div>
-	<div class="card-body">
-		<h3><span id="chorecard-chore-name"></span></h3>
+@php if(!isset($asModal)) { $asModal = false; } @endphp
 
-		<p id="chorecard-chore-description"
-			class="text-muted mt-0"></p>
+@if($asModal)
+<div class="modal fade"
+	id="chorecard-modal"
+	tabindex="-1">
+	<div class="modal-dialog">
+		<div class="modal-content text-center">
+			<div class="modal-body">
+				@endif
 
-		<strong>{{ $__t('Tracked count') }}:</strong> <span id="chorecard-chore-tracked-count"
-			class="locale-number locale-number-generic"></span><br>
-		<strong>{{ $__t('Average execution frequency') }}:</strong> <span id="chorecard-average-execution-frequency"></span><br>
-		<strong>{{ $__t('Last tracked') }}:</strong> <span id="chorecard-chore-last-tracked"></span> <time id="chorecard-chore-last-tracked-timeago"
-			class="timeago timeago-contextual"></time><br>
-		@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
-		<strong>{{ $__t('Last done by') }}:</strong> <span id="chorecard-chore-last-done-by"></span>
-		@endif
+				<div class="card chorecard">
+					<div class="card-header">
+						<span class="float-left">{{ $__t('Chore overview') }}</span>
+						<a id="chorecard-chore-edit-button"
+							class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
+							href="#"
+							data-toggle="tooltip"
+							title="{{ $__t('Edit chore') }}">
+							<i class="fa-solid fa-edit"></i>
+						</a>
+						<a id="chorecard-chore-journal-button"
+							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
+							href="#">
+							{{ $__t('Chore journal') }}
+						</a>
+					</div>
+					<div class="card-body">
+						<h3><span id="chorecard-chore-name"></span></h3>
+
+						<p id="chorecard-chore-description"
+							class="text-muted mt-0"></p>
+
+						<strong>{{ $__t('Tracked count') }}:</strong> <span id="chorecard-chore-tracked-count"
+							class="locale-number locale-number-generic"></span><br>
+						<strong>{{ $__t('Average execution frequency') }}:</strong> <span id="chorecard-average-execution-frequency"></span><br>
+						<strong>{{ $__t('Last tracked') }}:</strong> <span id="chorecard-chore-last-tracked"></span> <time id="chorecard-chore-last-tracked-timeago"
+							class="timeago timeago-contextual"></time><br>
+						@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
+						<strong>{{ $__t('Last done by') }}:</strong> <span id="chorecard-chore-last-done-by"></span>
+						@endif
+					</div>
+				</div>
+
+				@if($asModal)
+			</div>
+			<div class="modal-footer">
+				<button type="button"
+					class="btn btn-secondary"
+					data-dismiss="modal">{{ $__t('Close') }}</button>
+			</div>
+		</div>
 	</div>
 </div>
+@endif
diff --git a/views/components/productcard.blade.php b/views/components/productcard.blade.php
index 8d1de460..95e349d2 100644
--- a/views/components/productcard.blade.php
+++ b/views/components/productcard.blade.php
@@ -6,92 +6,115 @@
 @endpush
 @endonce
 
-<div class="card productcard">
-	<div class="card-header">
-		<span class="float-left">{{ $__t('Product overview') }}</span>
-		<a id="productcard-product-edit-button"
-			class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
-			href="#"
-			data-toggle="tooltip"
-			title="{{ $__t('Edit product') }}">
-			<i class="fa-solid fa-edit"></i>
-		</a>
-		<a id="productcard-product-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-			href="#">
-			{{ $__t('Stock journal') }}
-		</a>
-		<a id="productcard-product-stock-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-			href="#">
-			{{ $__t('Stock entries') }}
-		</a>
-	</div>
-	<div class="card-body">
-		<h3><span id="productcard-product-name"></span></h3>
+@php if(!isset($asModal)) { $asModal = false; } @endphp
 
-		<div id="productcard-product-description-wrapper"
-			class="expandable-text mb-2 d-none">
-			<p id="productcard-product-description"
-				class="text-muted collapse mb-0"></p>
-			<a class="collapsed"
-				data-toggle="collapse"
-				href="#productcard-product-description">{{ $__t('Show more') }}</a>
+@if($asModal)
+<div class="modal fade"
+	id="productcard-modal"
+	tabindex="-1">
+	<div class="modal-dialog">
+		<div class="modal-content text-center">
+			<div class="modal-body">
+				@endif
+
+				<div class="card productcard">
+					<div class="card-header">
+						<span class="float-left">{{ $__t('Product overview') }}</span>
+						<a id="productcard-product-edit-button"
+							class="btn btn-sm btn-outline-secondary py-0 float-right disabled"
+							href="#"
+							data-toggle="tooltip"
+							title="{{ $__t('Edit product') }}">
+							<i class="fa-solid fa-edit"></i>
+						</a>
+						<a id="productcard-product-journal-button"
+							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
+							href="#">
+							{{ $__t('Stock journal') }}
+						</a>
+						<a id="productcard-product-stock-button"
+							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
+							href="#">
+							{{ $__t('Stock entries') }}
+						</a>
+					</div>
+					<div class="card-body">
+						<h3><span id="productcard-product-name"></span></h3>
+
+						<div id="productcard-product-description-wrapper"
+							class="expandable-text mb-2 d-none">
+							<p id="productcard-product-description"
+								class="text-muted collapse mb-0"></p>
+							<a class="collapsed"
+								data-toggle="collapse"
+								href="#productcard-product-description">{{ $__t('Show more') }}</a>
+						</div>
+
+						<strong>{{ $__t('Stock amount') }}:</strong>
+						<span id="productcard-product-stock-amount-wrapper">
+							<span id="productcard-product-stock-amount"
+								class="locale-number locale-number-quantity-amount"></span> <span id="productcard-product-stock-qu-name"></span>
+						</span>
+						<span id="productcard-product-stock-opened-amount"
+							class="small font-italic"></span>
+						<span id="productcard-aggregated-amounts"
+							class="pl-2 text-secondary d-none"><i class="fa-solid fa-custom-sigma-sign"></i> <span id="productcard-product-stock-amount-aggregated"
+								class="locale-number locale-number-quantity-amount"></span> <span id="productcard-product-stock-qu-name-aggregated"></span> <span id="productcard-product-stock-opened-amount-aggregated"
+								class="small font-italic"></span></span><br>
+
+						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
+						<strong>{{ $__t('Stock value') }}:</strong> <span id="productcard-product-stock-value"
+							class="locale-number locale-number-currency"></span><br>
+						@endif
+
+						@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)<strong>{{ $__t('Default location') }}:</strong> <span id="productcard-product-location"></span><br>@endif
+						<strong>{{ $__t('Last purchased') }}:</strong> <span id="productcard-product-last-purchased"></span> <time id="productcard-product-last-purchased-timeago"
+							class="timeago timeago-contextual"></time><br>
+						<strong>{{ $__t('Last used') }}:</strong> <span id="productcard-product-last-used"></span> <time id="productcard-product-last-used-timeago"
+							class="timeago timeago-contextual"></time><br>
+
+						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)<strong>
+							{{ $__t('Last price') }}:</strong> <span id="productcard-product-last-price"
+							data-toggle="tooltip"
+							data-trigger="hover click"></span>
+						<br>
+						@endif
+
+						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
+						<strong>{{ $__t('Average price') }}:</strong> <span id="productcard-product-average-price"
+							data-toggle="tooltip"
+							data-trigger="hover click"></span>
+						<br>
+						@endif
+
+						@if(GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)<strong>{{ $__t('Average shelf life') }}:</strong> <span id="productcard-product-average-shelf-life"></span><br>@endif
+						<strong>{{ $__t('Spoil rate') }}:</strong> <span id="productcard-product-spoil-rate"></span>
+
+						<p class="w-75 mt-3 mx-auto">
+							<img id="productcard-product-picture"
+								class="img-fluid img-thumbnail d-none"
+								src=""
+								loading="lazy">
+						</p>
+
+						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
+						<h5 class="mt-3">{{ $__t('Price history') }}</h5>
+						<canvas id="productcard-product-price-history-chart"
+							class="w-100 d-none"></canvas>
+						<span id="productcard-no-price-data-hint"
+							class="font-italic d-none">{{ $__t('No price history available') }}</span>
+						@endif
+					</div>
+				</div>
+
+				@if($asModal)
+			</div>
+			<div class="modal-footer">
+				<button type="button"
+					class="btn btn-secondary"
+					data-dismiss="modal">{{ $__t('Close') }}</button>
+			</div>
 		</div>
-
-		<strong>{{ $__t('Stock amount') }}:</strong>
-		<span id="productcard-product-stock-amount-wrapper">
-			<span id="productcard-product-stock-amount"
-				class="locale-number locale-number-quantity-amount"></span> <span id="productcard-product-stock-qu-name"></span>
-		</span>
-		<span id="productcard-product-stock-opened-amount"
-			class="small font-italic"></span>
-		<span id="productcard-aggregated-amounts"
-			class="pl-2 text-secondary d-none"><i class="fa-solid fa-custom-sigma-sign"></i> <span id="productcard-product-stock-amount-aggregated"
-				class="locale-number locale-number-quantity-amount"></span> <span id="productcard-product-stock-qu-name-aggregated"></span> <span id="productcard-product-stock-opened-amount-aggregated"
-				class="small font-italic"></span></span><br>
-
-		@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
-		<strong>{{ $__t('Stock value') }}:</strong> <span id="productcard-product-stock-value"
-			class="locale-number locale-number-currency"></span><br>
-		@endif
-
-		@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)<strong>{{ $__t('Default location') }}:</strong> <span id="productcard-product-location"></span><br>@endif
-		<strong>{{ $__t('Last purchased') }}:</strong> <span id="productcard-product-last-purchased"></span> <time id="productcard-product-last-purchased-timeago"
-			class="timeago timeago-contextual"></time><br>
-		<strong>{{ $__t('Last used') }}:</strong> <span id="productcard-product-last-used"></span> <time id="productcard-product-last-used-timeago"
-			class="timeago timeago-contextual"></time><br>
-
-		@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)<strong>
-			{{ $__t('Last price') }}:</strong> <span id="productcard-product-last-price"
-			data-toggle="tooltip"
-			data-trigger="hover click"></span>
-		<br>
-		@endif
-
-		@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
-		<strong>{{ $__t('Average price') }}:</strong> <span id="productcard-product-average-price"
-			data-toggle="tooltip"
-			data-trigger="hover click"></span>
-		<br>
-		@endif
-
-		@if(GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)<strong>{{ $__t('Average shelf life') }}:</strong> <span id="productcard-product-average-shelf-life"></span><br>@endif
-		<strong>{{ $__t('Spoil rate') }}:</strong> <span id="productcard-product-spoil-rate"></span>
-
-		<p class="w-75 mt-3 mx-auto">
-			<img id="productcard-product-picture"
-				class="img-fluid img-thumbnail d-none"
-				src=""
-				loading="lazy">
-		</p>
-
-		@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
-		<h5 class="mt-3">{{ $__t('Price history') }}</h5>
-		<canvas id="productcard-product-price-history-chart"
-			class="w-100 d-none"></canvas>
-		<span id="productcard-no-price-data-hint"
-			class="font-italic d-none">{{ $__t('No price history available') }}</span>
-		@endif
 	</div>
 </div>
+@endif
diff --git a/views/mealplan.blade.php b/views/mealplan.blade.php
index 14db4758..192ac3be 100644
--- a/views/mealplan.blade.php
+++ b/views/mealplan.blade.php
@@ -356,20 +356,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="mealplan-productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.productcard', [
+'asModal' => true
+])
 @stop
diff --git a/views/products.blade.php b/views/products.blade.php
index 30f4ccbc..43b80a21 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -174,7 +174,7 @@
 							</div>
 						</div>
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $product->id }}">
 						{{ $product->name }}
 						@if(!empty($product->picture_file_name))
@@ -285,20 +285,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.productcard', [
+'asModal' => true
+])
 @stop
diff --git a/views/recipeposform.blade.php b/views/recipeposform.blade.php
index a920c2c6..5448e8db 100644
--- a/views/recipeposform.blade.php
+++ b/views/recipeposform.blade.php
@@ -136,9 +136,5 @@
 
 		</form>
 	</div>
-
-	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
-		@include('components.productcard')
-	</div>
 </div>
 @stop
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index d7ee0249..394f5616 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -227,7 +227,7 @@
 							<i class="fa-solid fa-box"></i>
 						</a>
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $listItem->product_id }}">
 						@if(!empty($listItem->product_id)) {{ $listItem->product_name }}<br>@endif<em>{!! nl2br($listItem->note ?? '') !!}</em>
 					</td>
@@ -426,20 +426,8 @@
 		</div>
 	</div>
 </div>
-<div class="modal fade"
-	id="shoppinglist-productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+
+@include('components.productcard', [
+'asModal' => true
+])
 @stop
diff --git a/views/stockentries.blade.php b/views/stockentries.blade.php
index e81206a2..f8e84037 100644
--- a/views/stockentries.blade.php
+++ b/views/stockentries.blade.php
@@ -199,7 +199,7 @@
 								</a>
 								@endif
 								<div class="dropdown-divider"></div>
-								<a class="dropdown-item product-name-cell"
+								<a class="dropdown-item productcard-trigger"
 									data-product-id="{{ $stockEntry->product_id }}"
 									type="button"
 									href="#">
@@ -247,7 +247,7 @@
 						data-product-id="{{ $stockEntry->product_id }}">
 						{{ $stockEntry->product_id }}
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $stockEntry->product_id }}">
 						{{ FindObjectInArrayByPropertyValue($products, 'id', $stockEntry->product_id)->name }}
 					</td>
@@ -319,20 +319,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.productcard', [
+'asModal' => true
+])
 @stop
diff --git a/views/stockjournal.blade.php b/views/stockjournal.blade.php
index 03bfb387..c672a89c 100644
--- a/views/stockjournal.blade.php
+++ b/views/stockjournal.blade.php
@@ -217,7 +217,7 @@
 								</a>
 								@endif
 								<div class="dropdown-divider"></div>
-								<a class="dropdown-item product-name-cell"
+								<a class="dropdown-item productcard-trigger"
 									data-product-id="{{ $stockLogEntry->product_id }}"
 									type="button"
 									href="#">
@@ -256,7 +256,7 @@
 							</div>
 						</div>
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $stockLogEntry->product_id }}">
 						<span class="name-anchor @if($stockLogEntry->undone == 1) text-strike-through @endif">{{ $stockLogEntry->product_name }}</span>
 						@if($stockLogEntry->undone == 1)
@@ -301,20 +301,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="stockjournal-productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.productcard', [
+'asModal' => true
+])
 @stop
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index 5c55dda2..325a27a6 100755
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -279,7 +279,7 @@
 								</a>
 								@endif
 								<div class="dropdown-divider"></div>
-								<a class="dropdown-item product-name-cell"
+								<a class="dropdown-item productcard-trigger"
 									data-product-id="{{ $currentStockEntry->product_id }}"
 									type="button"
 									href="#">
@@ -323,7 +323,7 @@
 							</div>
 						</div>
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $currentStockEntry->product_id }}">
 						{{ $currentStockEntry->product_name }}
 						<span class="d-none">{{ $currentStockEntry->product_barcodes }}</span>
@@ -428,7 +428,7 @@
 					<td>
 						{!! $currentStockEntry->product_description !!}
 					</td>
-					<td class="product-name-cell cursor-link"
+					<td class="productcard-trigger cursor-link"
 						data-product-id="{{ $currentStockEntry->parent_product_id }}">
 						{{ $currentStockEntry->parent_product_name }}
 					</td>
@@ -465,20 +465,7 @@
 	</div>
 </div>
 
-<div class="modal fade"
-	id="stockoverview-productcard-modal"
-	tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content text-center">
-			<div class="modal-body">
-				@include('components.productcard')
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-					class="btn btn-secondary"
-					data-dismiss="modal">{{ $__t('Close') }}</button>
-			</div>
-		</div>
-	</div>
-</div>
+@include('components.productcard', [
+'asModal' => true
+])
 @stop