diff --git a/package-lock.json b/package-lock.json
index 955817c..81ae221 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react-hook-form": "^7.51.4",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.22.1",
+        "react-toastify": "^10.0.5",
         "tailwindcss": "^3.4.1",
         "zod": "^3.23.8"
       },
@@ -1928,6 +1929,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3644,6 +3653,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 1247c81..5b2401c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-hook-form": "^7.51.4",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.22.1",
+    "react-toastify": "^10.0.5",
     "tailwindcss": "^3.4.1",
     "zod": "^3.23.8"
   },
diff --git a/src/App.tsx b/src/App.tsx
index ff099c3..67fe1e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,14 @@
 import { RouterProvider } from 'react-router-dom';
 import { Routes } from './browserRoutes/routes/Routes';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
 
   return (
     <>
       <RouterProvider router={Routes} />
+      <ToastContainer />
     </>
   )
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 393ab50..a3cdc62 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,13 +1,14 @@
 interface ButtonProps {
     color: string;
     hover: string;
-    text: string
+    text: string;
+    onClick?: () => void;
 }
 
-function Button({color, hover, text}: ButtonProps) {
+function Button({ color, hover, text, onClick }: ButtonProps) {
     return (
         <div className="flex items-center justify-center">
-            <button className={`btn bg-${color} hover:bg-${hover}`}>
+            <button className={`btn bg-${color} hover:bg-${hover}`} onClick={onClick}>
                 {text}
             </button>
         </div>
diff --git a/src/pages/Shop/ProductDetail.tsx b/src/pages/Shop/ProductDetail.tsx
index 1f1f307..827f401 100644
--- a/src/pages/Shop/ProductDetail.tsx
+++ b/src/pages/Shop/ProductDetail.tsx
@@ -1,5 +1,7 @@
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 // components
 import Head from "../../components/Head";
@@ -13,29 +15,29 @@ interface Data {
 }
 
 interface RatingItem {
-  className: string;
-  checked?: boolean;
+    className: string;
+    checked?: boolean;
 }
 
 const commonClasses = "mask mask-star-2";
 
 const ratingItems: RatingItem[] = [
-  { className: `${commonClasses} mask-half-1` },
-  { className: `${commonClasses} mask-half-2` },
-  { className: `${commonClasses} mask-half-1` },
-  { className: `${commonClasses} mask-half-2` },
-  { className: `${commonClasses} mask-half-1` },
-  { className: `${commonClasses} mask-half-2` },
-  { className: `${commonClasses} mask-half-1` },
-  { className: `${commonClasses} mask-half-2` },
-  { className: `${commonClasses} mask-half-1` },
-  { className: `${commonClasses} mask-half-2` },
+    { className: `${commonClasses} mask-half-1` },
+    { className: `${commonClasses} mask-half-2` },
+    { className: `${commonClasses} mask-half-1` },
+    { className: `${commonClasses} mask-half-2` },
+    { className: `${commonClasses} mask-half-1` },
+    { className: `${commonClasses} mask-half-2` },
+    { className: `${commonClasses} mask-half-1` },
+    { className: `${commonClasses} mask-half-2` },
+    { className: `${commonClasses} mask-half-1` },
+    { className: `${commonClasses} mask-half-2` },
 ];
 
 
 function ProductDetail() {
     const [filledStars, setFilledStars] = useState(0);
-    
+
     const handleRatingChange = (index: number) => {
         setFilledStars(index / 2 + 0.5);
     };
@@ -46,6 +48,11 @@ function ProductDetail() {
         window.scrollTo(0, 0);
     }, []);
 
+    const addToCart = () => {
+        // logic for adding in cart
+        toast.success('Added to Cart', { autoClose: 2000 });
+    };
+
     return (
         <>
             <div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
@@ -107,14 +114,14 @@ function ProductDetail() {
                                     <h2 className="w-16 text-xl font-bold dark:text-gray-400">
                                         Rating:
                                     </h2>
-                                     <input
-                                            type="radio"
-                                            name="rating-10"
-                                            className="rating-hidden" 
-                                            readOnly
-                                            onChange={() => handleRatingChange(-1)}
-                                            defaultChecked
-                                        />
+                                    <input
+                                        type="radio"
+                                        name="rating-10"
+                                        className="rating-hidden"
+                                        readOnly
+                                        onChange={() => handleRatingChange(-1)}
+                                        defaultChecked
+                                    />
                                     {ratingItems.map((item, index) => (
                                         <input
                                             key={index}
@@ -123,11 +130,11 @@ function ProductDetail() {
                                             className={item.className}
                                             onChange={() => handleRatingChange(index)}
                                             readOnly
-                                            />
+                                        />
                                     ))}
-                                    <span className="ml-2">{`${filledStars} out of 5 `} 
+                                    <span className="ml-2">{`${filledStars} out of 5 `}
                                     </span>
-                                    
+
                                 </div>
 
                                 <div className="w-32 mb-8 ">
@@ -148,10 +155,9 @@ function ProductDetail() {
                                     </div>
                                 </div>
                                 <div className="flex flex-wrap items-center gap-10 ">
-                                    
-                                        <Button text="Add to Cart" color="mygreen" hover="myred" />
-                                        <Button text="Buy Now" color="myyellow" hover="myred" />
-                        
+
+                                    <Button text="Add to Cart" color="mygreen" hover="myred" onClick={addToCart} />
+                                    <Button text="Buy Now" color="myyellow" hover="myred" />
                                 </div>
                             </div>
                         </div>
diff --git a/src/pages/Shop/Shop.tsx b/src/pages/Shop/Shop.tsx
index a361b72..279bbfd 100644
--- a/src/pages/Shop/Shop.tsx
+++ b/src/pages/Shop/Shop.tsx
@@ -10,7 +10,6 @@ function Shop() {
         window.scrollTo(0, 0);
     }, []);
 
-
     return (
         <>
             <div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
@@ -38,7 +37,6 @@ function Shop() {
                     <Product desc="" image="https://img.freepik.com/free-photo/full-shot-beautiful-lady_23-2148440576.jpg?w=360&t=st=1708162622~exp=1708163222~hmac=a0eb19d754c23e36840605ecb684ece75e8b20e74ba329c1d0958a10dec2824f" price={99} name="Red Casual Wear" />
                 </div>
             </div>
-
         </>
     )
 }