diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9257a19..d6afacf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "react-dom": "^18",
         "react-icons": "^5.2.1",
         "react-markdown": "^9.0.1",
+        "react-toastify": "^10.0.5",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -5172,6 +5173,18 @@
         }
       }
     },
+    "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/frontend/package.json b/frontend/package.json
index 7f09698..73be8bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "react-dom": "^18",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
+    "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 67fb978..8efd999 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -4,6 +4,8 @@ import Link from "next/link";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import { useDataContext } from "@/context/dataContext";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Login() {
   const router = useRouter();
@@ -11,12 +13,14 @@ export default function Login() {
 
   return (
     <>
-      {(authState === "loading" || authState === "notloggedin") && (
-        <LoginInner />
-      )}
-      {authState === "loggedin" && router.push("/")}
-    </>
-  );
+    <ToastContainer />
+    {(authState === "loading" || authState === "notloggedin") && (
+      <LoginInner />
+    )}
+    {authState === "loggedin" && router.push("/")}
+  </>
+);
+
 }
 
 function LoginInner() {
@@ -26,13 +30,13 @@ function LoginInner() {
   const [loggingIn, setLogginIn] = useState<boolean>(false);
   const router = useRouter();
   const handleLogin= async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
+    // e.preventDefault();
     if (email.length == 0) {
-      setError("*Email can't be empty");
+      toast.error("Email can't be empty");
       return;
     }
     if (password.length == 0) {
-      setError("*Password can't be empty");
+      toast.error("Password can't be empty");
       return;
     }
     //call the api here
@@ -89,6 +93,7 @@ function LoginInner() {
                   className="block px-3 w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 text-sm sm:leading-6"
                   style={{ outline: 'none' }}
                 />
+                 
                   </div>
             </div>
 
diff --git a/frontend/src/app/signup/page.tsx b/frontend/src/app/signup/page.tsx
index 46fb947..3276414 100644
--- a/frontend/src/app/signup/page.tsx
+++ b/frontend/src/app/signup/page.tsx
@@ -4,6 +4,8 @@ import Link from "next/link";
 import axios from "axios";
 import { useDataContext } from "@/context/dataContext";
 import { useRouter } from "next/navigation";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Signup() {
   const router = useRouter();
@@ -29,21 +31,21 @@ function SignupInner() {
   const [Signingup, setSigningUp] = useState<boolean>(false);
 
   const handleSignup = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
+    // e.preventDefault();
     if (email.length === 0) {
-      setError("*Email can't be empty");
+      toast.error("Email can't be empty");
       return;
     }
     if (username.length === 0) {
-      setError("* Username can't be empty");
+      toast.error("Username can't be empty");
       return;
     }
     if (password.length === 0) {
-      setError("* Password can't be empty");
+      toast.error("Password can't be empty");
       return;
     }
     if (password !== confirmPassword) {
-      setError("* Passwords do not match");
+      toast.error("Passwords do not match");
       return;
     }
 
@@ -67,6 +69,7 @@ function SignupInner() {
 
   return (
     <>
+     <ToastContainer />
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 homepage">
         <div className="text-xs text-red-900 h-2">{error}</div>
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">