diff --git a/changelog/77_UNRELEASED_xxxx-xx-xx.md b/changelog/77_UNRELEASED_xxxx-xx-xx.md
index 0580b592..bc13ca43 100644
--- a/changelog/77_UNRELEASED_xxxx-xx-xx.md
+++ b/changelog/77_UNRELEASED_xxxx-xx-xx.md
@@ -58,6 +58,7 @@
   - When the corresponding product is already on the shopping list, the amount of the existing item is incremented instead of creating a new shopping list item
   - When a new shopping list item is created, the product's "Default quantity unit purchase" is now used (instead of the product's "Quantity unit stock")
 - When no price information is available for at least one ingredient, a red exclamation mark is now displayed next to the recipe total cost information
+- When clicking a recipe ingredient / product name, the product card will now be opened like on many other places throughout Grocy
 - Fixed that calories/costs of recipe ingredients were wrong when the ingredient option "Only check if any amount is in stock" was set and the on the ingredient used quantity unit was different from the product's QU stock
 - Fixed that multi-nested recipes (at least 3 levels of "included recipes") resulted in wrong amounts/costs/calories calculated for the ingredients orginating in those nested recipes (also affected the meal plan)
 
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 86286f5b..3327d385 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -521,7 +521,8 @@
 										$selectedRecipePosition->recipe_amount = $selectedRecipePosition->recipe_amount * $productQuConversion->factor;
 										}
 										@endphp
-										<span class="@if($selectedRecipePosition->due_score == 20) text-danger @elseif($selectedRecipePosition->due_score == 10) text-secondary @elseif($selectedRecipePosition->due_score == 1) text-warning @endif">
+										<span class="productcard-trigger cursor-link @if($selectedRecipePosition->due_score == 20) text-danger @elseif($selectedRecipePosition->due_score == 10) text-secondary @elseif($selectedRecipePosition->due_score == 1) text-warning @endif"
+											data-product-id="{{ $selectedRecipePosition->product_id }}">
 											@if(!empty($selectedRecipePosition->recipe_variable_amount))
 											{{ $selectedRecipePosition->recipe_variable_amount }}
 											@else
@@ -531,14 +532,16 @@
 											{{ FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id)->name }}
 										</span>
 										@if(GROCY_FEATURE_FLAG_STOCK)
-										<span class="d-print-none">
+										<span class="
+												d-print-none">
 											@if(FindObjectInArrayByPropertyValue($recipePositionsResolved, 'recipe_pos_id', $selectedRecipePosition->id)->need_fulfilled == 1)<i class="fa-solid fa-check text-success"></i>@elseif(FindObjectInArrayByPropertyValue($recipePositionsResolved, 'recipe_pos_id', $selectedRecipePosition->id)->need_fulfilled_with_shopping_list == 1)<i class="fa-solid fa-exclamation text-warning"></i>@else<i class="fa-solid fa-times text-danger"></i>@endif
 											<span class="timeago-contextual">@if(FindObjectInArrayByPropertyValue($recipePositionsResolved, 'recipe_pos_id', $selectedRecipePosition->id)->need_fulfilled == 1) {{ $__t('Enough in stock') }} (<span class="locale-number locale-number-quantity-amount">{{ $selectedRecipePosition->stock_amount }}</span> {{ $__n($selectedRecipePosition->stock_amount, FindObjectInArrayByPropertyValue($quantityUnits, 'id', $product->qu_id_stock)->name, FindObjectInArrayByPropertyValue($quantityUnits, 'id', $product->qu_id_stock)->name_plural) }}) @else {{ $__t('Not enough in stock, %1$s missing, %2$s already on shopping list', round($selectedRecipePosition->missing_amount, 2), round($selectedRecipePosition->amount_on_shopping_list, 2)) }} @endif</span>
 										</span>
 										@endif
 										@if($selectedRecipePosition->product_id != $selectedRecipePosition->product_id_effective)
 										<br class="d-print-none">
-										<span class="text-muted d-print-none"
+										<span class="productcard-trigger cursor-link text-muted d-print-none"
+											data-product-id="{{ $selectedRecipePosition->product_id_effective }}"
 											data-toggle="tooltip"
 											data-trigger="hover click"
 											title="{{ $__t('The parent product %1$s is currently not in stock, %2$s is the current next sub product based on the default consume rule (Opened first, then first due first, then first in first out)', FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id)->name, FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id_effective)->name) }}">
@@ -668,4 +671,8 @@
 		</div>
 	</div>
 </div>
+
+@include('components.productcard', [
+'asModal' => true
+])
 @stop