diff --git a/growbros-frontend/src/components/PlantDetails.tsx b/growbros-frontend/src/components/PlantDetails.tsx
index 73810bd2413583857b58ef530c5d89744824603b..1e2a6b76815558c5e8f24be0ab334a9d6f171f0b 100644
--- a/growbros-frontend/src/components/PlantDetails.tsx
+++ b/growbros-frontend/src/components/PlantDetails.tsx
@@ -1,6 +1,6 @@
 import "../stylesheets/PlantDetails.css";
 import "font-awesome/css/font-awesome.min.css";
-import { useParams } from "react-router-dom";
+import { useState } from "react";
 
 function PlantDetails(props: any) {
   const plant = props.plant;
@@ -64,27 +64,103 @@ function PlantDetails(props: any) {
             margin: "0 0 40px 0",
           }}
         >
-          <ButtonAddToGarden></ButtonAddToGarden>
-          <ButtonAddToWishlist></ButtonAddToWishlist>
+          <ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
+          <ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
         </div>
       </div>
     </>
   );
 }
 
-function ButtonAddToGarden() {
+function ButtonAddToGarden({ plantId }: any) {
+  const [status, setStatus] = useState<null | String>(null);
+  const token: String = "";
+
+  const handleButtonClick = async () => {
+    try {
+      const response = await fetch(
+        `http://localhost:8080/api/v1/garden/add/${plantId}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      if (response.status === 201) {
+        console.log("Pflanze wurde erfolgreich dem Garten hinzugefügt");
+      } else {
+        setStatus("Pflanze konnte nicht dem Garten hinzugefügt werden");
+      }
+    } catch (error) {
+      console.error("Error", error);
+      setStatus("Pflanze konnte nicht dem Garten hinzugefügt werden");
+    }
+  };
+
   return (
-    <button>
-      <i className="fa fa-leaf"></i>
-    </button>
+    <>
+      {status && (
+        <div
+          className={`status-message ${
+            status.includes("erfolgreich") ? "success-message" : "error-message"
+          }`}
+        >
+          {status}
+        </div>
+      )}
+      <button onClick={handleButtonClick}>
+        <i className="fa fa-leaf"></i>
+      </button>
+    </>
   );
 }
 
-function ButtonAddToWishlist() {
+//TODO css für status message
+function ButtonAddToWishlist({ plantId }: any) {
+  const [status, setStatus] = useState<null | String>(null);
+  const token: String = "";
+
+  const handleButtonClick = async () => {
+    try {
+      const response = await fetch(
+        `http://localhost:8080/api/v1/wishlist/add/${plantId}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      if (response.status === 201) {
+        console.log("Pflanze wurde erfolgreich der Wunschliste hinzugefügt");
+      } else {
+        setStatus("Pflanze konnte nicht der Wunschliste hinzugefügt werden");
+      }
+    } catch (error) {
+      console.error("Error", error);
+      setStatus("Pflanze konnte nicht der Wunschliste hinzugefügt werden");
+    }
+  };
+
   return (
-    <button>
-      <i className="fa fa-heart"></i>
-    </button>
+    <>
+      {status && (
+        <div
+          className={`status-message ${
+            status.includes("erfolgreich") ? "success-message" : "error-message"
+          }`}
+        >
+          {" "}
+          {status}
+        </div>
+      )}
+      <button onClick={handleButtonClick}>
+        <i className="fa fa-heart"></i>
+      </button>
+    </>
   );
 }
 
diff --git a/growbros-frontend/src/pages/Suche.tsx b/growbros-frontend/src/pages/Suche.tsx
index a3f068fbb618930017f162de734b2d8c8d92acc0..f467c99b632b3c79657312e2bceb36bc43b7772e 100644
--- a/growbros-frontend/src/pages/Suche.tsx
+++ b/growbros-frontend/src/pages/Suche.tsx
@@ -4,6 +4,7 @@ import PlantsOverview from "../components/PlantsOverview";
 import { useState } from "react";
 import FilterPage from "../components/FilterPage";
 
+
 function Suche() {
   return (
     <>