diff --git a/package-lock.json b/package-lock.json
index 651042e..24efebd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "react-router-dom": "^6.23.1",
         "react-scripts": "^5.0.1",
         "react-scroll": "^1.9.0",
+        "react-toastify": "^10.0.5",
         "styled-components": "^6.1.11"
       },
       "devDependencies": {
@@ -7639,6 +7640,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/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -18751,6 +18760,18 @@
         "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.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-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index c90b2d4..6427a1a 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",
+    "react-toastify": "^10.0.5",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
diff --git a/src/Components/Contact/Contact.css b/src/Components/Contact/Contact.css
index eb18be4..e7e34d8 100644
--- a/src/Components/Contact/Contact.css
+++ b/src/Components/Contact/Contact.css
@@ -66,11 +66,10 @@
   margin: 20px 0;
 }
 /*Added the hover effct here on  submit button */
-.btn-div .btn:hover{
-
+.btn-div .btn:hover {
   display: flex;
-  background-color:rgb(111, 111, 160);
-  color:white;
+  background-color: rgb(111, 111, 160);
+  color: white;
   justify-content: center;
 }
 
@@ -85,9 +84,9 @@
   width:70vw;
 } */
 
- .btn:hover{
-  background-color:rgb(111, 111, 160);
-  color:white;
+.btn:hover {
+  background-color: rgb(111, 111, 160);
+  color: white;
 }
 /* Media query for Smart Phone */
 @media (max-width: 600px) {
@@ -134,13 +133,14 @@
   } */
 }
 
+/* ToastStyles.css */
+
 @media (max-width: 370px) {
-  .contact-col form{
+  .contact-col form {
     width: 80vw;
-    }
-  .contact-col form input, .contact-col form textarea{
+  }
+  .contact-col form input,
+  .contact-col form textarea {
     width: 80vw;
-    }
- 
-   
+  }
 }
diff --git a/src/Components/Contact/Contact.jsx b/src/Components/Contact/Contact.jsx
index e43b766..8c691e6 100644
--- a/src/Components/Contact/Contact.jsx
+++ b/src/Components/Contact/Contact.jsx
@@ -1,17 +1,21 @@
 import React from "react";
-import "./Contact.css";
-import msg_icon from "../../assets/msg-icon.png";
+import { useSelector } from "react-redux";
+import { Slide, ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import black_arrow from "../../assets/dark-arrow.png";
+import location_icon from "../../assets/location-icon.png";
 import mail_icon from "../../assets/mail-icon.png";
+import msg_icon from "../../assets/msg-icon.png";
 import phone_icon from "../../assets/phone-icon.png";
-import location_icon from "../../assets/location-icon.png";
 import white_arrow from "../../assets/white-arrow.png";
-import black_arrow from "../../assets/dark-arrow.png";
-import { useSelector } from "react-redux";
+import "./Contact.css";
 
 const Contact = () => {
   const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
-  const reversetheme = useSelector((state) => state.theme.value) ? "light" : "dark";
-  const arrowImage = theme === 'light' ? white_arrow : black_arrow;
+  const reversetheme = useSelector((state) => state.theme.value)
+    ? "light"
+    : "dark";
+  const arrowImage = theme === "light" ? white_arrow : black_arrow;
   const [emailError, setEmailError] = React.useState("");
 
   const [result, setResult] = React.useState("");
@@ -38,9 +42,9 @@ const Contact = () => {
     const email = formData.get("email");
 
     if (!validateEmail(email)) {
-        setEmailError("Please enter a valid email address.");
-        setResult("");
-        return;
+      setEmailError("Please enter a valid email address.");
+      setResult("");
+      return;
     }
 
     formData.append("access_key", "5759d7fc-28f1-473a-a904-ab8d5f981280");
@@ -54,15 +58,54 @@ const Contact = () => {
 
     if (data.success) {
       setResult("Form Submitted Successfully");
+      toast("✅Form Submitted Successfully!", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        closeButton: false,
+        transition: Slide,
+        className: "custom-toast",
+        bodyClassName: "custom-toast-body",
+      });
       event.target.reset();
     } else {
       console.log("Error", data);
       setResult(data.message);
+      toast.error("🚫 Form Submission Failed!", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        closeButton: false,
+        theme: "light",
+        transition: Slide,
+        className: "custom-toast",
+        bodyClassName: "custom-toast-body",
+      });
     }
   };
 
   return (
     <div className={`contact ${theme}`} id="contact">
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        closeButton:false
+        theme="light"
+        transition={Slide}
+      />
       <div className="contact-col">
         <h3 className="send">
           Send us a message<img src={msg_icon} alt=""></img>