diff --git a/apps/Recipes/Templates/single.php b/apps/Recipes/Templates/single.php
index 3b55acd..0cd22ae 100644
--- a/apps/Recipes/Templates/single.php
+++ b/apps/Recipes/Templates/single.php
@@ -11,6 +11,8 @@ the_header(
 );
 ?>
 
+<div id="recipe-id" hidden><?= $context['recipe']->get_id() ?></div>
+
 <div class="container">
     <div class="single-recipe">
         <div class="single-recipe-info">
@@ -72,8 +74,8 @@ the_header(
                         </div>
                     </div>
                     <div class="small-btns">
-                        <button class="btn btn-secondary btn-small hover-anim" title="Add To Favorites">
-                            <i class="fa-regular fa-heart"></i>
+                        <button id="favorite-btn" class="btn btn-secondary btn-small hover-anim <?= $context['recipe']->is_in_favorite ? 'active' : '' ?>" title="Add To Favorites">
+                            <i class="<?= $context['recipe']->is_in_favorite ? 'fa-solid' : 'fa-regular' ?> fa-heart"></i>
                         </button>
                         <a class="btn btn-secondary btn-small hover-anim"
                             href="<?php the_permalink('recipes:export-pdf', [$context['recipe']->get_id()]); ?>"
diff --git a/assets/css/style.css b/assets/css/style.css
index 8b42546..f12b129 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -92,6 +92,15 @@ body {
 .logo {
     max-width: 70px;
 }
+.toastify.info {
+    background: #003a92;
+}
+.toastify.error {
+    background: #770000;
+}
+.toastify.success {
+    background: #00660f;
+}
 
 /*placeholder for search and login section*/
 .search-and-login {
@@ -638,6 +647,9 @@ hr {
     display: inline-block;
     text-align: center;
 }
+.btn:disabled {
+    opacity: 0.3;
+}
 
 .btn-primary {
     background-color: var(--button-primary);