diff --git a/public/viewjs/recipes.js b/public/viewjs/recipes.js
index d176c435..c79829dc 100644
--- a/public/viewjs/recipes.js
+++ b/public/viewjs/recipes.js
@@ -75,6 +75,17 @@ $("#status-filter").on("change", function()
 	}
 
 	recipesTables.column(5).search(value).draw();
+
+	$('.recipe-gallery-item').removeClass('d-none');
+	if(value !== "")
+	{
+		if(value === 'enoughtinstock')
+			$('.recipe-gallery-item').not('.recipe-enoughtinstock').addClass('d-none');
+		if(value === 'enoughinstockwithshoppinglist')
+			$('.recipe-gallery-item').not('.recipe-enoughinstockwithshoppinglist').addClass('d-none');
+		if(value === 'notenoughinstock')
+			$('.recipe-gallery-item').not('.recipe-notenoughinstock').addClass('d-none');
+	}
 });
 
 $(".recipe-delete").on('click', function(e)
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 756aacd4..e28ad07a 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -144,7 +144,7 @@
 				id="gallery">
 				<div class="card-columns no-gutters">
 					@foreach($recipes as $recipe)
-					<a class="discrete-link recipe-gallery-item"
+					<a class="discrete-link recipe-gallery-item @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $recipe->id)->need_fulfilled == 1) recipe-enoughtinstock @elseif(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $recipe->id)->need_fulfilled_with_shopping_list == 1) recipe-enoughinstockwithshoppinglist @else recipe-notenoughinstock @endif"
 						data-recipe-id="{{ $recipe->id }}"
 						href="#">
 						<div id="RecipeGalleryCard-{{ $recipe->id }}"