diff --git a/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx b/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx
index 793172b3..080d966c 100644
--- a/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx
+++ b/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx
@@ -25,7 +25,7 @@ interface EditInfoAndSubmitProps {
   enableSubmit?: boolean;
   isAdmin: boolean;
   isFav?: boolean;
-  handleFavPressed?: () => void;
+  handleFavPressed?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   id?: string;
 }
 
@@ -119,7 +119,11 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
             </div>
           ) : (
             <div className="ml-2">
-              <button type="button" id="like-button">
+              <button
+                type="button"
+                id="like-button"
+                onClick={props.handleFavPressed}
+              >
                 <Icon
                   icon={
                     props.isFav
@@ -127,7 +131,6 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
                       : "ph:heart-straight-bold"
                   }
                   className="h-6 w-6 cursor-pointer text-accent-red"
-                  onClick={props.handleFavPressed}
                 />
               </button>
             </div>
diff --git a/src/components/Pets/Details/Details.tsx b/src/components/Pets/Details/Details.tsx
index 237f8a2c..20155e6e 100644
--- a/src/components/Pets/Details/Details.tsx
+++ b/src/components/Pets/Details/Details.tsx
@@ -4,10 +4,12 @@ import EditInfoAndSubmit, {
 } from "@/components/Admin/Pets/Add/EditInfoAndSubmit";
 import BigPetCard from "@/components/Pets/Details/BigPetCard";
 import MainLayout from "@/layouts/MainLayout";
+import useFavoriteStore from "@/store/favStore";
 import { Pet } from "@/types/pets";
 import { useState } from "react";
 
 const Details = ({ isAdmin, data }: { isAdmin: boolean; data: Pet }) => {
+  const { favorites } = useFavoriteStore();
   const [petInfo, setPetInfo] = useState<info>({
     gender: data.gender as "male" | "female",
     type: data.type as "dog" | "cat" | "-",
@@ -19,13 +21,23 @@ const Details = ({ isAdmin, data }: { isAdmin: boolean; data: Pet }) => {
   });
 
   const [isFav, setIsFav] = useState(false);
+  const addToFavorites = useFavoriteStore((state) => state.addToFavorites);
+  const removeFromFavorites = useFavoriteStore(
+    (state) => state.removeFromFavorites
+  );
 
   const handleSubmit = () => {
     console.log(petInfo);
   };
 
-  const handleFavPressed = () => {
-    setIsFav(!isFav);
+  const handleFavPressed = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (isFav) {
+      removeFromFavorites(data.id);
+    } else {
+      addToFavorites(data.id);
+    }
+    setIsFav((prev) => !prev);
   };
 
   return (
@@ -37,8 +49,10 @@ const Details = ({ isAdmin, data }: { isAdmin: boolean; data: Pet }) => {
           setValue={setPetInfo}
           onSubmit={handleSubmit}
           isAdmin={isAdmin}
-          isFav={isFav}
-          handleFavPressed={handleFavPressed}
+          isFav={favorites.find((fav) => fav === data.id) ? true : false}
+          handleFavPressed={(event: React.MouseEvent<HTMLButtonElement>) =>
+            handleFavPressed(event)
+          }
           id={data.id}
         />
         <img src={logo} alt="logo" className="hidden h-64 w-64 xl:block" />