diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 06f6a8b..1dc71e5 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -14,6 +14,7 @@
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.23.1",
         "react-terminal": "^1.4.4",
+        "react-toastify": "^10.0.5",
         "react-toggle-dark-mode": "^1.1.1",
         "terminal-in-react": "^4.3.1"
       },
@@ -7022,6 +7023,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",
@@ -12862,6 +12871,18 @@
         "react-dom": "^18.2.0"
       }
     },
+    "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/react-toggle-dark-mode": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz",
@@ -20042,6 +20063,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -24416,6 +24442,14 @@
         "react-device-detect": "2.1.2"
       }
     },
+    "react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "requires": {
+        "clsx": "^2.1.0"
+      }
+    },
     "react-toggle-dark-mode": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 99b36d1..b9b5dd6 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -19,6 +19,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-terminal": "^1.4.4",
+    "react-toastify": "^10.0.5",
     "react-toggle-dark-mode": "^1.1.1",
     "terminal-in-react": "^4.3.1"
   },
diff --git a/webapp/src/components/Breakpoint/Breakpoint.css b/webapp/src/components/Breakpoint/Breakpoint.css
index be6bc8e..0854cf5 100644
--- a/webapp/src/components/Breakpoint/Breakpoint.css
+++ b/webapp/src/components/Breakpoint/Breakpoint.css
@@ -28,3 +28,13 @@
   align-items: center;
   gap: 28px;
 }
+
+.save-button {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 2px;
+  background: var(--primary-orange, #e88f40);
+}
diff --git a/webapp/src/components/Breakpoint/Breakpoint.jsx b/webapp/src/components/Breakpoint/Breakpoint.jsx
index 754785b..09fa198 100644
--- a/webapp/src/components/Breakpoint/Breakpoint.jsx
+++ b/webapp/src/components/Breakpoint/Breakpoint.jsx
@@ -1,20 +1,78 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Breakpoint.css";
 
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import axios from "axios";
+
 const Breakpoint = () => {
+  const [breakLine, setBreakLine] = useState("");
+  const [breakFunction, setBreakFunction] = useState("");
+
+  const handleBreakSave = async (e) => {
+    e.preventDefault();
+    console.log("click");
+    if (!breakLine && !breakFunction) {
+      toast.error("Enter any of the field", {
+        autoClose: 1000,
+      });
+      return;
+    }
+    try {
+      const data = await axios.post("http://127.0.0.1:10000/set_breakpoint", {
+        location: breakLine,
+        name: "program",
+      });
+      console.log(data);
+      toast.success("Added breakpoint", {
+        autoClose: 1000,
+      });
+    } catch (error) {
+      toast.error("Something went Wrong", {
+        autoClose: 1000,
+      });
+    }
+  };
   return (
     <div className="breakpoint-container">
       <div className="add-breakpoint">Add Breakpoint</div>
       <div className="lower-breakpoint">
         <div className="line-breakpoint">
           <a>Line</a>
-          <input type="text" name="" id="" />
+          <input
+            type="text"
+            name=""
+            id=""
+            value={breakLine}
+            onChange={(e) => setBreakLine(e.target.value)}
+          />
         </div>
         <div className="line-breakpoint">
           <a>Function</a>
-          <input type="text" name="" id="" />
+          <input
+            type="text"
+            name=""
+            id=""
+            value={breakFunction}
+            onChange={(e) => setBreakFunction(e.target.value)}
+          />
         </div>
+        <button className="save-button" onClick={handleBreakSave}>
+          Add
+        </button>
       </div>
+      <ToastContainer
+        position="bottom-right"
+        autoClose={1000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
     </div>
   );
 };
diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx
index 492ec9c..cb183ac 100644
--- a/webapp/src/context/DataContext.jsx
+++ b/webapp/src/context/DataContext.jsx
@@ -17,18 +17,15 @@ export const DataProvider = ({ children }) => {
   const fetchData = useCallback(async () => {
     if (refresh) {
       try {
-        // Your data fetching logic here
         const stackResponse = await axios.get("/api/stack");
         const functionsResponse = await axios.get("/api/functions");
 
         setStack(stackResponse.data);
         setFunctions(functionsResponse.data);
 
-        // Reset refresh after data is fetched
         setRefresh(false);
       } catch (error) {
         console.error("Error fetching data:", error);
-        // Optional: set refresh to false on error as well
         setRefresh(false);
       }
     }