diff --git a/public/css/grocy.css b/public/css/grocy.css
index 3ba8866b..51dc9cf1 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -81,12 +81,6 @@ input::-webkit-inner-spin-button {
 	-webkit-appearance: none;
 }
 
-.centered-dialog .modal-title,
-.centered-dialog .modal-body {
-	margin-left: auto;
-	margin-right: auto;
-}
-
 /* Navigation style customizations */
 #mainNav {
 	background-color: #e5e5e5 !important;
diff --git a/public/viewjs/stockoverview.js b/public/viewjs/stockoverview.js
index b5d879ae..611e7520 100644
--- a/public/viewjs/stockoverview.js
+++ b/public/viewjs/stockoverview.js
@@ -154,41 +154,8 @@ $(document).on('click', '.product-consume-button', function(e)
 
 $(document).on("click", ".product-name-cell", function(e)
 {
-	var productHasPicture = BoolVal($(e.currentTarget).attr("data-product-has-picture"));
-
-	if (productHasPicture)
-	{
-		var pictureUrl = $(e.currentTarget).attr("data-picture-url");
-		var productName = $(e.currentTarget).attr("data-product-name");
-		var productId = $(e.currentTarget).attr("data-product-id");
-
-		bootbox.dialog({
-			title: L("Image of product #1", productName),
-			message: "<img src='" + pictureUrl + "' class='img-fluid img-thumbnail'>",
-			backdrop: false,
-			onEscape: true,
-			closeButton: false,
-			className: 'centered-dialog',
-			buttons: {
-				editproduct: {
-					label: '<i class="fas fa-edit"></i> ' + L('Edit product'),
-					className: 'btn-info responsive-button',
-					callback: function ()
-					{
-						window.location.href = U('/product/' + productId + '?returnto=' + encodeURIComponent(window.location.pathname) + '#product-picture');
-					}
-				},
-				close: {
-					label: L('Close'),
-					className: 'btn-default responsive-button',
-					callback: function()
-					{
-						bootbox.hideAll();
-					}
-				}
-			}
-		});
-	}
+	Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
+	$("#stockoverview-productcard-modal").modal("show");
 });
 
 function RefreshStatistics()
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index d9975c2c..22b8a478 100644
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -93,12 +93,8 @@
 							<i class="fas fa-utensils"></i> {{ $L('All') }}
 						</a>
 					</td>
-					<td class="product-name-cell"
-						data-picture-url="{{ $U('/api/file/productpictures?file_name=' . FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->picture_file_name) }}"
-						data-product-id="{{ $currentStockEntry->product_id }}"
-						data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}"
-						data-product-has-picture="{{ BoolToString(!empty(FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->picture_file_name)) }}">
-						{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}@if(!empty(FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->picture_file_name)) <i class="fas fa-image text-muted"></i>@endif
+					<td class="product-name-cell" data-product-id="{{ $currentStockEntry->product_id }}">
+						{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }} <i class="fas fa-info text-muted"></i>
 					</td>
 					<td>
 						<span id="product-{{ $currentStockEntry->product_id }}-amount">{{ $currentStockEntry->amount }}</span> {{ Pluralize($currentStockEntry->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name_plural) }}
@@ -123,4 +119,17 @@
 		</table>
 	</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">{{ $L('Close') }}</button>
+			</div>
+		</div>
+	</div>
+</div>
 @stop