diff --git a/public/viewjs/recipes.js b/public/viewjs/recipes.js
index 510fd1fc..4df66a24 100644
--- a/public/viewjs/recipes.js
+++ b/public/viewjs/recipes.js
@@ -445,7 +445,7 @@ $(document).on('click', '.ingredient-done-button', function(e)
 {
 	e.preventDefault();
 
-	$(e.currentTarget).parent().toggleClass("text-strike-through");
+	$(e.currentTarget).parent().toggleClass("text-strike-through").toggleClass("text-muted");
 });
 
 $(document).on("click", ".add-to-mealplan-button", function(e)
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 6421a27c..f1b30f8f 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -505,12 +505,12 @@
 										<div class="small text-muted font-italic">{{ $__t('Disabled') }}</div>
 										@endif
 										@if($userSettings['recipes_show_ingredient_checkbox'])
-										<a class="btn btn-link btn-xs cursor-pointer ingredient-done-button"
+										<a class="btn btn-light btn-sm ingredient-done-button"
 											href="#"
 											data-toggle="tooltip"
 											data-placement="right"
 											title="{{ $__t('Mark this item as done') }}">
-											<i class="fa-solid fa-check-circle"></i>
+											<i class="fa-solid fa-check-circle text-primary"></i>
 										</a>
 										@endif
 										@php