diff --git a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
index f8584f0e62e37ea43b767c11677f970952397168..46559a3bd3df978f7a0acbfc2c323eb8391f717f 100644
--- a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
+++ b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
@@ -1,9 +1,10 @@
 import {NavLink} from "react-router-dom";
+import "../stylesheets/Navbar.css"
 
 function NavbarRegistrationAndLogin() {
     return (
         <nav>
-            <ul>
+            <ul className="navBarList">
                 <li>
                     <NavLink className="title" to="/">
                         GrowBros
diff --git a/growbros-frontend/src/components/PlantCard.tsx b/growbros-frontend/src/components/PlantCard.tsx
index e41383e51a7cb8a178c4802f9b4f3d4df95b9824..4456c1ae32112cbedc1219761cdb75dee2e2a1b7 100644
--- a/growbros-frontend/src/components/PlantCard.tsx
+++ b/growbros-frontend/src/components/PlantCard.tsx
@@ -1,12 +1,12 @@
 import "../stylesheets/PlantCard.css";
 import {Link} from "react-router-dom";
 import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
 import QuickActions from "./QuickActions.tsx";
 
 type PlantCardProps = {
     plant: Plant,
-    quickActions?: QuickActionButtonProps[]
+    quickActions?: QuickActionButtonType[]
 }
 
 export default function PlantCard({plant, quickActions}: PlantCardProps) {
@@ -19,7 +19,7 @@ export default function PlantCard({plant, quickActions}: PlantCardProps) {
                         <h2>{plant.name}</h2>
                     </div>
                 </Link>
-                <QuickActions quickActions={quickActions}/>
+                <QuickActions quickActions={quickActions} plantId={plant.id}/>
             </li>
         </>
     );
diff --git a/growbros-frontend/src/components/PlantsOverview.tsx b/growbros-frontend/src/components/PlantsOverview.tsx
index c22f163d17ecece3135a2786e22774e397d7e79b..37151cb60e45ef1353f193a90937a0e6e527c1f2 100644
--- a/growbros-frontend/src/components/PlantsOverview.tsx
+++ b/growbros-frontend/src/components/PlantsOverview.tsx
@@ -1,10 +1,10 @@
 import PlantCard from "./PlantCard";
 import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
 
 type PlantsOverviewProps = {
     plants: Plant[],
-    quickActions?: QuickActionButtonProps[]
+    quickActions?: QuickActionButtonType[]
 }
 
 export default function PlantsOverview({plants, quickActions}: PlantsOverviewProps) {
diff --git a/growbros-frontend/src/components/QuickActionButton.tsx b/growbros-frontend/src/components/QuickActionButton.tsx
index 09675055ccb1ee21c7d05be15ffc9f62b20de087..074f42c739b86f6c40aa23689856a860e0bf9bcf 100644
--- a/growbros-frontend/src/components/QuickActionButton.tsx
+++ b/growbros-frontend/src/components/QuickActionButton.tsx
@@ -1,15 +1,34 @@
 import "../stylesheets/QuickActions.css"
+import useGrowbrosFetcher from "../utils/useGrowbrosFetcher.ts";
+import HeartBrokenIcon from "@mui/icons-material/HeartBroken";
+import AgricultureIcon from "@mui/icons-material/Agriculture";
 
 export type QuickActionButtonProps = {
-    iconClassName: string,
-    tooltip: string,
-    onClick: () => void
+    type: QuickActionButtonType,
+    plantId: number
 }
 
-function QuickActionButton({iconClassName, onClick, tooltip}: QuickActionButtonProps) {
-    return (
-        <button onClick={onClick} className={iconClassName + " quickActionButton"} title={tooltip}/>
-    );
+export type QuickActionButtonType = "ADD_TO_WISHLIST" | "REMOVE_FROM_WISHLIST" | "ADD_TO_GARDEN" | "REMOVE_FROM_GARDEN"
+
+function QuickActionButton({type, plantId}: QuickActionButtonProps) {
+    const bc = useGrowbrosFetcher();
+
+    switch (type) {
+        case "ADD_TO_WISHLIST":
+            return <button onClick={() => bc.addToWishlist(plantId)} className={"fa fa-heart quickActionButton"}
+                           title={"Add this plant to your wishlist"}/>
+        case "ADD_TO_GARDEN":
+            return <button onClick={() => bc.addToGarden(plantId)} className={"fa fa-leaf quickActionButton"}
+                           title={"Add this plant to your garden"}/>
+        case "REMOVE_FROM_WISHLIST":
+            return (<button onClick={() => bc.removeFromWishlist(plantId)} className={"quickActionButton"}
+                            title={"Remove this plant from your wishlist"}><HeartBrokenIcon sx={{fontSize: 19}}/>
+            </button>)
+        case "REMOVE_FROM_GARDEN":
+            return (<button onClick={() => bc.removeFromGarden(plantId)} className={"quickActionButton"}
+                            title={"Remove this plant from your garden"}><AgricultureIcon/>
+            </button>)
+    }
 }
 
-export default QuickActionButton;
\ No newline at end of file
+export default QuickActionButton;
diff --git a/growbros-frontend/src/components/QuickActions.tsx b/growbros-frontend/src/components/QuickActions.tsx
index 39d51d14cc35e95e3c789c9b4471e1d5bf5a4621..312c99a6e2064b7124dedddcd3fe61474e830ff3 100644
--- a/growbros-frontend/src/components/QuickActions.tsx
+++ b/growbros-frontend/src/components/QuickActions.tsx
@@ -1,17 +1,17 @@
-import QuickActionButton, {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import QuickActionButton, {QuickActionButtonType} from "./QuickActionButton.tsx";
 import "../stylesheets/QuickActions.css"
 
 type QuickActionsProps = {
-    quickActions?: QuickActionButtonProps[];
+    quickActions?: QuickActionButtonType[];
+    plantId: number;
 }
 
-function QuickActions({quickActions}: QuickActionsProps) {
+function QuickActions({quickActions, plantId}: QuickActionsProps) {
     if (quickActions) {
         return <div className="quickActions">{quickActions.map(
             (action, index) =>
-                <QuickActionButton iconClassName={action.iconClassName}
-                                   tooltip={action.tooltip}
-                                   onClick={action.onClick}
+                <QuickActionButton plantId={plantId}
+                                   type={action}
                                    key={index}
                 />
         )} </div>
diff --git a/growbros-frontend/src/pages/Wunschliste.tsx b/growbros-frontend/src/pages/Wunschliste.tsx
index d0aff19b294176d91f6e350b7208acac14636fe2..f8a4173fcd27f2a1e8c7da60b2455204149b3cf1 100644
--- a/growbros-frontend/src/pages/Wunschliste.tsx
+++ b/growbros-frontend/src/pages/Wunschliste.tsx
@@ -69,11 +69,7 @@ function Wunschliste() {
                 />
                 <button onClick={handleClearWishList}>Wunschliste leeren</button>
             </div>
-            <PlantsOverview plants={plants}quickActions={[{
-        iconClassName: "fa fa-heart",
-        onClick: () => console.log("clicked quick action"),
-        tooltip: "TOOLTIP!"
-      }]}/>
+            <PlantsOverview plants={plants} quickActions={["ADD_TO_GARDEN", "REMOVE_FROM_WISHLIST"]}/>
         </>
     );
 }
diff --git a/growbros-frontend/src/stylesheets/PlantCard.css b/growbros-frontend/src/stylesheets/PlantCard.css
index 221269c59354708c0417919702031a87ab7b90e5..39d237f930298e7a8b8d5ee9e7260ac89e483aef 100644
--- a/growbros-frontend/src/stylesheets/PlantCard.css
+++ b/growbros-frontend/src/stylesheets/PlantCard.css
@@ -1,4 +1,5 @@
 .plantCard {
+    color: #ececec;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -20,9 +21,9 @@
     padding: 1rem;
     background: linear-gradient(
             to bottom,
-            rgba(220, 220, 220, 0),
-            rgba(220, 220, 220, 0.45),
-            rgba(220, 220, 220, 0.65)
+            rgba(20, 20, 20, 0),
+            rgba(20, 20, 20, 0.3),
+            rgba(0, 0, 0, 0.5)
     );
 }
 
@@ -34,7 +35,7 @@
 }
 
 .plantCard:hover {
-    color: #4d5927;
+    color: white;
     border-color: black;
     box-shadow: 0 12px 24px rgb(24 24 24 / 15%);
 }