Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/package-lock.json	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -15,4 +15,5 @@
 				"react-dom": "^19.2.0",
 				"react-router-dom": "^7.13.0",
+				"react-toastify": "^11.0.5",
 				"tailwindcss": "^4.1.18"
 			},
@@ -2152,4 +2153,13 @@
 			"funding": {
 				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
 			}
 		},
@@ -3683,4 +3693,17 @@
 			}
 		},
+		"node_modules/react-toastify": {
+			"version": "11.0.5",
+			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+			"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+			"license": "MIT",
+			"dependencies": {
+				"clsx": "^2.1.1"
+			},
+			"peerDependencies": {
+				"react": "^18 || ^19",
+				"react-dom": "^18 || ^19"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/package.json	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -17,4 +17,5 @@
 		"react-dom": "^19.2.0",
 		"react-router-dom": "^7.13.0",
+		"react-toastify": "^11.0.5",
 		"tailwindcss": "^4.1.18"
 	},
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/App.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -1,3 +1,5 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -11,4 +13,16 @@
 		<div className="flex flex-col min-h-screen">
 			<Nav />
+			<ToastContainer
+				position="top-right"
+				autoClose={2000}
+				hideProgressBar={false}
+				newestOnTop={false}
+				closeOnClick
+				rtl={false}
+				pauseOnFocusLoss
+				draggable
+				pauseOnHover
+				theme="light"
+			/>
 			<main className="grow">
 				<Outlet />
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Login.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -1,4 +1,5 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -22,6 +23,11 @@
 			setUser(response.data.user);
 			navigate("/");
-		} catch (error) {
-			setError("Login failed. Please check your credentials.");
+			toast.success("Login successful!");
+		} catch (error: any) {
+			const errorMessage =
+				error.response?.data?.error ||
+				"Login failed. Please check your credentials.";
+			setError(errorMessage);
+			toast.error(errorMessage);
 		}
 	};
Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Nav.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -1,3 +1,4 @@
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import Logo from "../assets/logo-finkwave.png";
@@ -12,6 +13,8 @@
 			await axiosInstance.post("/auth/logout");
 			setUser(undefined);
+			toast.success("Logout successful!");
 		} catch (error) {
 			console.error("Logout failed:", error);
+			toast.error("Logout failed!");
 		}
 	};
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Register.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -15,4 +16,5 @@
 		null,
 	);
+	const [error, setError] = useState<string | null>(null);
 
 	const navigate = useNavigate();
@@ -28,5 +30,4 @@
 	const handleRegister = async (e: React.FormEvent) => {
 		e.preventDefault();
-		// todo: add proper error handling
 		if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) {
 			alert("Max file size is 5MB");
@@ -53,6 +54,10 @@
 			setUser(response.data.user);
 			navigate("/");
-		} catch (error) {
-			console.error("Registration failed:", error);
+			toast.success("Registration successful!");
+		} catch (error: any) {
+			const errorMessage =
+				error.response?.data?.error || "Registration failed. Please try again.";
+			setError(errorMessage);
+			toast.error(errorMessage);
 		}
 	};
@@ -62,4 +67,5 @@
 			<h2 className="text-2xl mb-4">Register</h2>
 			<form className="bg-white p-6 rounded shadow-md w-80">
+				{error && <p className="text-red-500 mb-4">{error}</p>}
 				<div className="mb-4">
 					<label className="block text-gray-700 mb-2" htmlFor="username">